/* ============================================================================
   DAUMEDIA · Design Tokens
   Three-layer architecture:  Primitive  →  Semantic  →  Component
   Themes: default (light) on :root / [data-theme="light"]  ·  [data-theme="dark"]
   All color pairings verified for WCAG 2.1 AA (body ≥ 4.5:1, large/UI ≥ 3:1).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   LAYER 1 · PRIMITIVES  (raw brand values — never used directly in components)
   ---------------------------------------------------------------------------- */
:root {
  /* Brand · Violet (primary) — anchor --violet-600 #7C3AED */
  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-200: #DDD6FE;
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-800: #5B21B6;
  --violet-900: #4C1D95;
  --violet-950: #2E1065;

  /* Brand · Indigo (gradient bridge) — anchor --indigo-600 #4F46E5 */
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;

  /* Brand · Cyan/Teal (secondary) — anchor --cyan-400 #22D3EE */
  --cyan-50:  #ECFEFF;
  --cyan-100: #CFFAFE;
  --cyan-200: #A5F3FC;
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;
  --cyan-700: #0E7490;
  --cyan-800: #155E75;
  --cyan-900: #164E63;
  --cyan-950: #083344;

  /* Accent · Pink (use sparingly — energy / highlight) — anchor #EC4899 */
  --pink-400: #F472B6;
  --pink-500: #EC4899;
  --pink-600: #DB2777;

  /* Neutral · Ink (brand-tinted indigo neutrals — measured from assets) */
  --ink-50:  #F4F4F8;
  --ink-100: #E6E5EE;
  --ink-200: #C9C7D6;
  --ink-300: #A5A2BC;
  --ink-400: #7C7899;
  --ink-500: #565375;
  --ink-600: #3D3A5C;
  --ink-700: #2A2747;
  --ink-800: #1A1830;
  --ink-850: #12101F;   /* dark surface            */
  --ink-900: #0D0B18;   /* dark bg subtle          */
  --ink-950: #0A0814;   /* near-black bg (measured) */

  /* Warm off-white neutrals (tines-hybrid light surfaces) */
  --sand-50:  #FAF8F4;   /* warm off-white — light bg     */
  --sand-100: #F1ECE4;   /* warm cream — subtle / sunken  */
  --sand-200: #E7E1D7;   /* warm border                   */
  --sand-300: #D8D0C4;   /* warm border-strong            */

  --white: #FFFFFF;
  --black: #000000;

  /* Status */
  --green-500:  #10B981;
  --amber-500:  #F59E0B;
  --red-500:    #EF4444;

  /* ------------------------------------------------------------------
     LAYER 1b · Static primitives shared by both themes
     ------------------------------------------------------------------ */
  /* Signature gradients */
  --gradient-brand:      linear-gradient(135deg, #7C3AED 0%, #4F46E5 45%, #22D3EE 100%);
  --gradient-brand-rev:  linear-gradient(135deg, #22D3EE 0%, #4F46E5 55%, #7C3AED 100%);
  --gradient-brand-soft: linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #67E8F9 100%);
  --gradient-text:       linear-gradient(120deg, #A78BFA 0%, #818CF8 45%, #67E8F9 100%);

  /* Typography */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */
  --text-7xl:  4.5rem;     /* 72 */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.2em;   /* eyebrows / tagline "CREATIVE MEDIA SOLUTIONS" */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Spacing · 4px base */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-max: 1200px;
}

/* ----------------------------------------------------------------------------
   LAYER 2 · SEMANTIC  ·  LIGHT THEME (default)
   ---------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg:               var(--sand-50);
  --color-bg-subtle:        var(--sand-100);
  --color-surface:          var(--white);
  --color-surface-elevated: var(--white);
  --color-surface-sunken:   var(--sand-100);

  --color-border:           var(--sand-200);
  --color-border-strong:    var(--sand-300);

  --color-text:             var(--ink-800);   /* ~13:1 on white  */
  --color-text-muted:       var(--ink-500);   /* ~6.6:1 on white */
  --color-text-subtle:      var(--ink-400);   /* large text only */
  --color-text-inverse:     var(--white);

  --color-primary:          var(--violet-600); /* link/emphasis · 5.0:1 on white */
  --color-primary-strong:   var(--violet-600); /* fill bg · white text 4.9:1     */
  --color-primary-hover:    var(--violet-700);
  --color-on-primary:       var(--white);

  --color-secondary:        var(--cyan-700);   /* link/text teal · 4.7:1 on white */
  --color-secondary-strong: var(--cyan-700);   /* fill bg · white text 4.9:1      */
  --color-on-secondary:     var(--white);

  --color-accent:           var(--pink-600);   /* 4.5:1 on white */

  --color-success: #047857;
  --color-warning: #B45309;
  --color-danger:  #DC2626;

  --color-ring:      var(--violet-600);
  --color-glow-violet: rgba(124, 58, 237, 0.12);
  --color-glow-teal:   rgba(6, 182, 212, 0.10);

  /* Elevation — soft neutral shadows */
  --shadow-sm: 0 1px 2px rgba(20, 16, 40, 0.06), 0 1px 3px rgba(20, 16, 40, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 16, 40, 0.08), 0 2px 4px rgba(20, 16, 40, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 16, 40, 0.10), 0 4px 8px rgba(20, 16, 40, 0.06);
  --shadow-xl: 0 24px 60px rgba(20, 16, 40, 0.14), 0 8px 16px rgba(20, 16, 40, 0.08);
  --shadow-glow: 0 10px 30px var(--color-glow-violet);

  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #FAF8F4 100%);
}

/* ----------------------------------------------------------------------------
   LAYER 2 · SEMANTIC  ·  DARK THEME
   ---------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg:               #050409;         /* deeper near-black */
  --color-bg-subtle:        var(--ink-950);  /* #0A0814 */
  --color-surface:          var(--ink-850);
  --color-surface-elevated: var(--ink-800);
  --color-surface-sunken:   #030207;

  --color-border:           var(--ink-700);
  --color-border-strong:    var(--ink-600);

  --color-text:             #F5F5F7;          /* ~18:1 on bg      */
  --color-text-muted:       var(--ink-300);   /* ~8:1 on bg       */
  --color-text-subtle:      var(--ink-400);   /* ~4.8:1 on bg     */
  --color-text-inverse:     var(--ink-950);

  --color-primary:          var(--violet-400); /* link/emphasis · ~7:1 on bg  */
  --color-primary-strong:   var(--violet-600); /* fill bg · white text 4.9:1  */
  --color-primary-hover:    var(--violet-500);
  --color-on-primary:       var(--white);

  --color-secondary:        var(--cyan-400);   /* ~11:1 on bg                 */
  --color-secondary-strong: var(--cyan-400);   /* fill bg · dark text ~10:1   */
  --color-on-secondary:     var(--ink-950);

  --color-accent:           var(--pink-400);   /* ~7:1 on bg */

  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger:  #F87171;

  --color-ring:      var(--violet-400);
  --color-glow-violet: rgba(167, 139, 250, 0.55);
  --color-glow-teal:   rgba(34, 211, 238, 0.50);

  /* Elevation — deep shadows + neon glow signature */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 44px var(--color-glow-violet);

  --gradient-surface: linear-gradient(180deg, #12101F 0%, #0A0814 100%);
}

/* ----------------------------------------------------------------------------
   LAYER 3 · COMPONENT  (derived from semantic — safe to reference in UI)
   ---------------------------------------------------------------------------- */
:root {
  /* Button */
  --button-radius:            var(--radius-full);
  --button-font:              var(--font-display);
  --button-weight:            var(--weight-semibold);
  --button-padding-y:         var(--space-3);
  --button-padding-x:         var(--space-6);
  --button-primary-bg:        var(--color-primary-strong);
  --button-primary-fg:        var(--color-on-primary);
  --button-primary-bg-hover:  var(--color-primary-hover);

  /* Card */
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
  --card-radius:  var(--radius-lg);
  --card-shadow:  var(--shadow-md);
  --card-padding: var(--space-6);

  /* Input */
  --input-bg:            var(--color-surface);
  --input-border:        var(--color-border-strong);
  --input-radius:        var(--radius-md);
  --input-text:          var(--color-text);
  --input-placeholder:   var(--color-text-subtle);
  --input-ring:          var(--color-ring);
  --input-padding-y:     var(--space-3);
  --input-padding-x:     var(--space-4);

  /* Badge */
  --badge-radius:  var(--radius-full);
  --badge-font:    var(--font-body);
  --badge-weight:  var(--weight-medium);
}