/* ============================================================
   DESIGN SYSTEM - INNOVATION STRATEGY CONSULTANCY
   Overhaul: Modern, forward-thinking, clean + creative

   Dials:
   - DESIGN_VARIANCE: 7 (asymmetric, interesting)
   - MOTION_INTENSITY: 5 (fluid, quality)
   - VISUAL_DENSITY: 3 (breathing room)
   ============================================================ */

:root {
  color-scheme: light;
  /* ============================================================
     COMPREHENSIVE COLOR SYSTEM (Refactoring UI compliant)
     Cool slate base + Electric blue accent + Semantic colors
     Total: 10 greys + 10 blues + 24 semantic = 44 shades
     ============================================================ */

  /* ============================================================
     GREYS (10 shades) - Foundation of UI
     "Greys are the majority of your UI" - Refactoring UI
     ============================================================ */
  --grey-50:   #f8fafc;   /* slate-50 - Lightest background */
  --grey-100:  #f1f5f9;   /* slate-100 - Subtle panels */
  --grey-200:  #e2e8f0;   /* slate-200 - Borders, dividers */
  --grey-300:  #cbd5e1;   /* slate-300 - Disabled state bg */
  --grey-400:  #94a3b8;   /* slate-400 - Placeholder text */
  --grey-500:  #64748b;   /* slate-500 - Secondary text */
  --grey-600:  #475569;   /* slate-600 - Body text */
  --grey-700:  #334155;   /* slate-700 - Strong text */
  --grey-800:  #1e293b;   /* slate-800 - Headings */
  --grey-900:  #0f172a;   /* slate-900 - Near-black */

  /* ============================================================
     PRIMARY BLUE (10 shades) - Innovation, forward-thinking
     ============================================================ */
  --blue-50:   #f0f9ff;   /* sky-50 - Ultra-light bg */
  --blue-100:  #e0f2fe;   /* sky-100 - Very light bg */
  --blue-200:  #bae6fd;   /* sky-200 - Light hover */
  --blue-300:  #7dd3fc;   /* sky-300 - Light accent */
  --blue-400:  #38bdf8;   /* sky-400 - Vivid */
  --blue-500:  #0ea5e9;   /* sky-500 - Base (primary) */
  --blue-600:  #0284c7;   /* sky-600 - Hover */
  --blue-700:  #0369a1;   /* sky-700 - Dark hover */
  --blue-800:  #075985;   /* sky-800 - Very dark */
  --blue-900:  #0c4a6e;   /* sky-900 - Darkest */

  /* ============================================================
     SEMANTIC: ERROR / DESTRUCTIVE (8 shades)
     ============================================================ */
  --red-50:    #fef2f2;   /* red-50 - Error bg light */
  --red-100:   #fee2e2;   /* red-100 - Error bg */
  --red-200:   #fecaca;   /* red-200 - Error border light */
  --red-300:   #fca5a5;   /* red-300 - Error border */
  --red-400:   #f87171;   /* red-400 - Error dark-mode border */
  --red-500:   #ef4444;   /* red-500 - Error base */
  --red-600:   #dc2626;   /* red-600 - Error hover */
  --red-700:   #b91c1c;   /* red-700 - Error dark */
  --red-800:   #991b1b;   /* red-800 - Error surface */
  --red-900:   #7f1d1d;   /* red-900 - Error darkest */

  /* ============================================================
     SEMANTIC: SUCCESS / POSITIVE (8 shades)
     ============================================================ */
  --green-50:  #f0fdf4;   /* green-50 - Success bg light */
  --green-100: #dcfce7;   /* green-100 - Success bg */
  --green-200: #bbf7d0;   /* green-200 - Success border light */
  --green-300: #86efac;   /* green-300 - Success border */
  --green-400: #4ade80;   /* green-400 - Success dark-mode border */
  --green-500: #22c55e;   /* green-500 - Success base */
  --green-600: #16a34a;   /* green-600 - Success hover */
  --green-700: #15803d;   /* green-700 - Success dark */
  --green-800: #166534;   /* green-800 - Success surface */
  --green-900: #14532d;   /* green-900 - Success darkest */

  /* ============================================================
     SEMANTIC: WARNING / CAUTION (8 shades)
     ============================================================ */
  --yellow-50:  #fefce8;  /* yellow-50 - Warning bg light */
  --yellow-100: #fef9c3;  /* yellow-100 - Warning bg */
  --yellow-200: #fef08a;  /* yellow-200 - Warning border light */
  --yellow-300: #fde047;  /* yellow-300 - Warning border */
  --yellow-400: #facc15;  /* yellow-400 - Warning dark-mode border */
  --yellow-500: #eab308;  /* yellow-500 - Warning base */
  --yellow-600: #ca8a04;  /* yellow-600 - Warning hover */
  --yellow-700: #a16207;  /* yellow-700 - Warning dark */
  --yellow-800: #854d0e;  /* yellow-800 - Warning surface */
  --yellow-900: #713f12;  /* yellow-900 - Warning darkest */

  /* ============================================================
     SEMANTIC TOKENS (mapped from palette)
     Use these in components for consistent, meaningful color usage
     ============================================================ */

  /* Text colors */
  --text-primary:   var(--grey-900);   /* Headlines, strong text */
  --text-secondary: var(--grey-600);   /* Body text, labels */
  --text-tertiary:  var(--grey-500);   /* Supporting text */
  --text-disabled:  var(--grey-400);   /* Disabled state */
  --text-placeholder: var(--grey-500); /* Placeholder text, AA on light surfaces */

  /* Background colors */
  --bg-base:    var(--grey-50);       /* Main background, softly off-white */
  --bg-subtle:  var(--grey-100);      /* Subtle panels */
  --bg-muted:   var(--grey-200);      /* More visible panels */
  --bg-hover:   var(--grey-100);      /* Hover backgrounds */

  /* Border colors */
  --border-default: var(--grey-200);  /* Default borders */
  --border-strong:  var(--grey-500);  /* Emphasized/control borders */
  --border-subtle:  var(--grey-100);  /* Subtle dividers */

  /* Accent colors */
  --accent:         var(--blue-700);  /* Primary accent, AA for text on light surfaces */
  --accent-hover:   var(--blue-800);  /* Accent hover */
  --accent-light:   var(--blue-50);   /* Accent backgrounds */
  --accent-border:  var(--blue-200);  /* Accent borders */

  /* Semantic state colors */
  --error:          var(--red-700);   /* Error text, icons */
  --error-hover:    var(--red-800);   /* Error hover */
  --error-light:    var(--red-50);    /* Error backgrounds */
  --error-border:   var(--red-200);   /* Error borders */

  --success:        var(--green-700); /* Success text, icons */
  --success-hover:  var(--green-800); /* Success hover */
  --success-light:  var(--green-50);  /* Success backgrounds */
  --success-border: var(--green-200); /* Success borders */

  --warning:        var(--yellow-600); /* Warning text (darker for contrast) */
  --warning-hover:  var(--yellow-700); /* Warning hover */
  --warning-light:  var(--yellow-50);  /* Warning backgrounds */
  --warning-border: var(--yellow-200); /* Warning borders */

  /* Fixed dark sections and theme-aware component surfaces are separate roles. */
  --dark-surface:        var(--grey-900);
  --dark-surface-raised: var(--grey-800);
  --text-on-dark:        var(--grey-50);
  --text-on-dark-soft:   var(--grey-300);
  --text-on-dark-muted:  var(--grey-400);
  --border-on-dark:      var(--grey-400);
  --text-on-accent:      var(--grey-50);

  /* Buttons retain equal hierarchy and contrast in both themes. */
  --action-bg:        var(--grey-900);
  --action-fg:        var(--grey-50);
  --action-hover-bg:  var(--accent);
  --action-hover-fg:  var(--text-on-accent);

  /* Legacy aliases remain available, but each now has one semantic role. */
  --ink:            var(--dark-surface);
  --ink-soft:       var(--dark-surface-raised);
  --surface:        var(--bg-base);
  --surface-2:      var(--bg-subtle);
  --surface-3:      var(--bg-muted);
  --electric:       var(--accent);
  --electric-deep:  var(--accent-hover);
  --electric-vivid: var(--blue-400);
  --line:           var(--border-default);
  --line-strong:    var(--border-strong);

  /* ============================================================
     TYPOGRAPHY - Geist (modern, clean, forward-thinking)
     ============================================================ */

  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Monaco, "Cascadia Mono", monospace;

  /* ============================================================
     HAND-CRAFTED TYPE SCALE (Refactoring UI compliant)
     Marketing page context: 8 intentional sizes, 25%+ jumps
     NO clamp(), NO fractional pixels - precise px values
     ============================================================ */

  --text-xs:     12px;   /* Captions, legal text, small labels */
  --text-sm:     14px;   /* Small text, helper text, form labels */
  --text-base:   16px;   /* Body text (baseline) */
  --text-lg:     20px;   /* Emphasized body, large labels */
  --text-xl:     28px;   /* H3, card headings */
  --text-2xl:    36px;   /* H2, section headings */
  --text-3xl:    48px;   /* H1, page titles */
  --text-hero:   64px;   /* Hero headline only */

  /* Font weights (limited palette) */
  --font-normal:   400;  /* Body text, labels */
  --font-medium:   500;  /* Slightly emphasized (optional) */
  --font-semibold: 600;  /* Strong emphasis, buttons */
  --font-bold:     700;  /* Headlines, hero */

  /* Line heights (inverse to size - larger = tighter) */
  --leading-none:    1.0;   /* Display type only */
  --leading-tight:   1.1;   /* Hero, large headlines (64px, 48px) */
  --leading-snug:    1.3;   /* H2, H3 (36px, 28px) */
  --leading-normal:  1.5;   /* Body text (16px, 20px) */
  --leading-relaxed: 1.6;   /* Small text (12px, 14px - needs help) */

  /* Legacy aliases (backward compatibility - will be deprecated) */
  --step--1: var(--text-sm);   /* 14px */
  --step-0:  var(--text-base); /* 16px */
  --step-1:  var(--text-lg);   /* 20px */
  --step-2:  var(--text-xl);   /* 28px */
  --step-3:  var(--text-2xl);  /* 36px */
  --step-4:  var(--text-3xl);  /* 48px */
  --step-5:  var(--text-hero); /* 64px */
  --step-6:  var(--text-hero); /* 64px (same as step-5) */
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY (Mobile)
   Scale down large sizes on mobile with discrete steps
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --text-hero:  48px;   /* 64px → 48px (hero) */
    --text-3xl:   36px;   /* 48px → 36px (H1) */
    --text-2xl:   28px;   /* 36px → 28px (H2) */
    /* --text-xl stays 28px (same on mobile) */
    /* --text-lg stays 20px */
    /* --text-base stays 16px */
    /* --text-sm stays 14px */
    /* --text-xs stays 12px */
  }
}

@media (max-width: 480px) {
  :root {
    --text-hero:  40px;   /* 48px → 40px (extra small screens) */
    --text-3xl:   32px;   /* 36px → 32px */
  }
}

:root {
  /* ============================================================
     SPACING - Consistent vertical rhythm
     ============================================================ */

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-7: 9rem;

  --max-width: 1400px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --header-h: 72px;

  /* ============================================================
     SHADOWS - Tinted to background, subtle elevation
     ============================================================ */

  --shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(15, 23, 42, 0.03);

  --shadow-md:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 1px 4px rgba(15, 23, 42, 0.04);

  --shadow-lg:
    0 12px 32px rgba(15, 23, 42, 0.09),
    0 2px 8px rgba(15, 23, 42, 0.05);

  --shadow-accent:
    0 8px 24px rgba(15, 23, 42, 0.14),
    0 2px 8px rgba(15, 23, 42, 0.08);

  /* ============================================================
     MOTION - Fluid CSS (MOTION_INTENSITY: 5)
     ============================================================ */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* smooth deceleration */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle bounce */
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* stronger bounce */

  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 450ms;
}

/* ============================================================
   DARK MODE - Full semantic token swap
   Greys invert, blues brighten, semantic colors adjust
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Text colors (inverted) */
    --text-primary:     var(--grey-50);    /* Light text */
    --text-secondary:   var(--grey-300);   /* Softer light text */
    --text-tertiary:    var(--grey-400);   /* Muted light text */
    --text-disabled:    var(--grey-600);   /* Disabled (darker in dark mode) */
    --text-placeholder: var(--grey-400);   /* Placeholder, AA on dark inputs */

    /* Background colors (inverted) */
    --bg-base:    var(--grey-900);   /* Dark background */
    --bg-subtle:  var(--grey-800);   /* Subtle elevated */
    --bg-muted:   var(--grey-700);   /* More elevated */
    --bg-hover:   var(--grey-800);   /* Hover backgrounds */

    /* Border colors (inverted, lighter) */
    --border-default: var(--grey-700);   /* Default borders */
    --border-strong:  var(--grey-400);   /* Emphasized/control borders */
    --border-subtle:  var(--grey-800);   /* Subtle dividers */

    /* Accent colors (brighter for dark mode) */
    --accent:         var(--blue-300);   /* Brighter primary */
    --accent-hover:   var(--blue-200);   /* Even brighter hover */
    --accent-light:   var(--blue-900);   /* Dark accent bg */
    --accent-border:  var(--blue-800);   /* Dark accent border */

    /* Semantic colors (adjusted for dark mode) */
    --error:          var(--red-300);    /* Readable error text */
    --error-hover:    var(--red-200);    /* Brighter hover */
    --error-light:    var(--red-900);    /* Dark error bg */
    --error-border:   var(--red-400);    /* Dark error border */

    --success:        var(--green-300);  /* Readable success text */
    --success-hover:  var(--green-200);  /* Brighter hover */
    --success-light:  var(--green-900);  /* Dark success bg */
    --success-border: var(--green-400);  /* Dark success border */

    --warning:        var(--yellow-300); /* Readable warning text */
    --warning-hover:  var(--yellow-200); /* Brighter hover */
    --warning-light:  var(--yellow-900); /* Dark warning bg */
    --warning-border: var(--yellow-400); /* Dark warning border */

    /* Theme-aware component and action roles. */
    --surface:        var(--bg-base);
    --surface-2:      var(--bg-subtle);
    --surface-3:      var(--bg-muted);
    --text-on-accent: var(--grey-900);
    --action-bg:      var(--grey-50);
    --action-fg:      var(--grey-900);
    --action-hover-bg: var(--accent);
    --action-hover-fg: var(--text-on-accent);
    --electric:       var(--accent);
    --electric-deep:  var(--accent-hover);
    --electric-vivid: var(--blue-300);
    --line:           var(--border-default);
    --line-strong:    var(--border-strong);

    /* Shadows darker in dark mode */
    --shadow-sm:
      0 1px 2px rgba(0, 0, 0, 0.18),
      0 2px 8px rgba(0, 0, 0, 0.14);

    --shadow-md:
      0 4px 12px rgba(0, 0, 0, 0.24),
      0 1px 4px rgba(0, 0, 0, 0.18);

    --shadow-lg:
      0 12px 32px rgba(0, 0, 0, 0.32),
      0 2px 8px rgba(0, 0, 0, 0.2);

    --shadow-accent:
      0 8px 24px rgba(0, 0, 0, 0.36),
      0 2px 8px rgba(0, 0, 0, 0.2);
  }
}

/* ============================================================
   REDUCED MOTION - Honor accessibility preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}