/* ===========================================
   SKETCHPLAY BASE CSS
   Variables, Reset, Typography
   Mobile-First Architecture
   =========================================== */

/* ===========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   All variables include fallback values
   =========================================== */
:root {
  /* ===== Primary Colors ===== */
  --skp-primary: #448bff;
  --skp-primary-hover: #3a7be0;
  --skp-primary-light: #e8f1ff;
  --skp-primary-rgb: 68, 139, 255;
  
  /* ===== Neutral Colors ===== */
  --skp-dark: #1a1a2e;
  --skp-gray-900: #1f2937;
  --skp-gray-800: #374151;
  --skp-gray-700: #495057;
  --skp-gray-600: #6b7280;
  --skp-gray-500: #94a3b8;
  --skp-gray-400: #cbd5e1;
  --skp-gray-300: #d1d5db;
  --skp-gray-200: #e2e8f0;
  --skp-gray-100: #f8fafc;
  --skp-white: #ffffff;
  
  /* ===== Feedback Colors ===== */
  --skp-success: #22c55e;
  --skp-success-hover: #16a34a;
  --skp-success-light: #dcfce7;
  --skp-success-bg: #f0fdf4;
  
  --skp-warning: #f59e0b;
  --skp-warning-hover: #d97706;
  --skp-warning-light: #fef3c7;
  
  --skp-danger: #ef4444;
  --skp-danger-hover: #dc2626;
  --skp-danger-light: #fee2e2;
  
  --skp-info: #0ea5e9;
  --skp-info-hover: #0284c7;
  --skp-info-light: #e0f2fe;
  
  /* ===== Layout ===== */
  --skp-card-max-width: 540px;
  --skp-card-max-width-lg: 720px;
  --skp-container-padding: 1rem;
  
  /* ===== Border Radius ===== */
  --skp-radius-xs: 0.25rem;
  --skp-radius-sm: 0.375rem;
  --skp-radius: 0.5rem;
  --skp-radius-md: 0.75rem;
  --skp-radius-lg: 1rem;
  --skp-radius-xl: 1.25rem;
  --skp-radius-full: 9999px;
  
  /* ===== Spacing Scale ===== */
  --skp-space-1: 0.25rem;
  --skp-space-2: 0.5rem;
  --skp-space-3: 0.75rem;
  --skp-space-4: 1rem;
  --skp-space-5: 1.25rem;
  --skp-space-6: 1.5rem;
  --skp-space-8: 2rem;
  --skp-space-10: 2.5rem;
  --skp-space-12: 3rem;
  
  /* ===== Typography ===== */
  --skp-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --skp-font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', monospace;
  
  --skp-font-xs: 0.75rem;
  --skp-font-sm: 0.8125rem;
  --skp-font-base: 1rem;
  --skp-font-lg: 1.125rem;
  --skp-font-xl: 1.25rem;
  --skp-font-2xl: 1.5rem;
  --skp-font-3xl: 2rem;
  --skp-font-4xl: 2.5rem;
  
  --skp-line-height: 1.5;
  --skp-line-height-tight: 1.25;
  --skp-line-height-loose: 1.75;
  
  --skp-font-light: 300;
  --skp-font-normal: 400;
  --skp-font-medium: 500;
  --skp-font-semibold: 600;
  --skp-font-bold: 700;
  --skp-font-extrabold: 800;
  
  /* ===== Transitions ===== */
  --skp-transition-fast: 0.15s ease-in-out;
  --skp-transition: 0.2s ease-in-out;
  --skp-transition-slow: 0.3s ease-in-out;
  
  /* ===== Shadows ===== */
  --skp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --skp-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --skp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --skp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --skp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --skp-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* ===== Z-Index Scale ===== */
  --skp-z-dropdown: 100;
  --skp-z-sticky: 200;
  --skp-z-fixed: 300;
  --skp-z-modal-backdrop: 400;
  --skp-z-modal: 500;
  --skp-z-tooltip: 600;
}

/* ===== Dark Mode Variables ===== */
[data-bs-theme="dark"] {
  --skp-gray-100: #1e1e2d;
  --skp-gray-200: #2b2b40;
  --skp-gray-300: #3f3f5a;
  --skp-white: #1a1a2e;
  --skp-gray-900: #f8f9fa;
  --skp-dark: #f8f9fa;
}

/* ===========================================
   CSS RESET (Modern)
   =========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--skp-font-family, 'Poppins', system-ui, sans-serif);
  font-size: var(--skp-font-base, 1rem);
  line-height: var(--skp-line-height, 1.5);
  color: var(--skp-gray-900, #1f2937);
  background-color: var(--skp-white, #ffffff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--skp-primary, #448bff);
  text-decoration: none;
}

a:hover {
  color: var(--skp-primary-hover, #3a7be0);
  text-decoration: underline;
}

/* ===========================================
   TYPOGRAPHY
   Mobile-First (base = mobile)
   =========================================== */

/* Headings */
h1, .h1 {
  font-size: var(--skp-font-2xl, 1.5rem);
  font-weight: var(--skp-font-bold, 700);
  line-height: var(--skp-line-height-tight, 1.25);
  color: var(--skp-dark, #1a1a2e);
  margin-bottom: var(--skp-space-4, 1rem);
}

h2, .h2 {
  font-size: var(--skp-font-xl, 1.25rem);
  font-weight: var(--skp-font-semibold, 600);
  line-height: var(--skp-line-height-tight, 1.25);
  color: var(--skp-dark, #1a1a2e);
  margin-bottom: var(--skp-space-3, 0.75rem);
}

h3, .h3 {
  font-size: var(--skp-font-lg, 1.125rem);
  font-weight: var(--skp-font-semibold, 600);
  line-height: var(--skp-line-height-tight, 1.25);
  color: var(--skp-dark, #1a1a2e);
  margin-bottom: var(--skp-space-2, 0.5rem);
}

h4, .h4,
h5, .h5,
h6, .h6 {
  font-size: var(--skp-font-base, 1rem);
  font-weight: var(--skp-font-semibold, 600);
  line-height: var(--skp-line-height-tight, 1.25);
  color: var(--skp-dark, #1a1a2e);
  margin-bottom: var(--skp-space-2, 0.5rem);
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  h1, .h1 {
    font-size: var(--skp-font-3xl, 2rem);
  }
  
  h2, .h2 {
    font-size: var(--skp-font-2xl, 1.5rem);
  }
  
  h3, .h3 {
    font-size: var(--skp-font-xl, 1.25rem);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: var(--skp-font-4xl, 2.5rem);
  }
}

/* Body Text */
p {
  margin-bottom: var(--skp-space-4, 1rem);
}

.lead {
  font-size: var(--skp-font-lg, 1.125rem);
  font-weight: var(--skp-font-light, 300);
  line-height: var(--skp-line-height-loose, 1.75);
}

.small, small {
  font-size: var(--skp-font-sm, 0.8125rem);
}

.text-xs {
  font-size: var(--skp-font-xs, 0.75rem);
}

/* Text Colors */
.text-muted {
  color: var(--skp-gray-600, #6b7280);
}

.text-primary {
  color: var(--skp-primary, #448bff);
}

.text-success {
  color: var(--skp-success, #22c55e);
}

.text-warning {
  color: var(--skp-warning, #f59e0b);
}

.text-danger {
  color: var(--skp-danger, #ef4444);
}

/* Font Weights */
.fw-light { font-weight: var(--skp-font-light, 300); }
.fw-normal { font-weight: var(--skp-font-normal, 400); }
.fw-medium { font-weight: var(--skp-font-medium, 500); }
.fw-semibold { font-weight: var(--skp-font-semibold, 600); }
.fw-bold { font-weight: var(--skp-font-bold, 700); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ===========================================
   PAGE STRUCTURE
   =========================================== */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===========================================
   IOS WEBKIT COMPATIBILITY
   Ensures text and backgrounds render correctly
   on iOS Safari and Chrome
   =========================================== */

/* Force text color rendering on iOS */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, label, a {
  -webkit-text-fill-color: currentColor;
}

/* Force background rendering on iOS */
input, textarea, select, button {
  -webkit-appearance: none;
  appearance: none;
}