/**
 * STICTION — Official Brand & UI Design Tokens (v2.0 Complete Edition)
 * Dual-Mode System: Warm Mineral Neutrals + Burnished Amber + Flow Jade + Focus Cobalt
 * Includes: Semantic Surfaces, Distinct Caution, 6-Series Data Viz, Streak Heatmap,
 *           Spatial Scale, Layout Containers, Typography, and Breakaway Physics Motion.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ── 1. Primitive Color Scales ──────────────────────────────────── */
  /* Warm Mineral Neutrals (Limestone -> Basalt) */
  --st-stone-25:  #FCFBF9;
  --st-stone-50:  #FAF8F5;
  --st-stone-100: #F3EFEA;
  --st-stone-200: #E8E2DA;
  --st-stone-300: #D5CEC4;
  --st-stone-400: #B5ADA2;
  --st-stone-500: #8A837C;
  --st-stone-600: #57524E;
  --st-stone-700: #3E3935;
  --st-stone-800: #2B2725;
  --st-stone-850: #24211F;
  --st-stone-900: #1B1918;
  --st-stone-925: #161413;
  --st-stone-950: #121110;
  --st-ink:       #1C1917;
  --st-parchment: #F5F2ED;

  /* Burnished Amber (Primary Brand & Breakaway Spark) */
  --st-amber-50:  #FEF6EE;
  --st-amber-100: #FDE9D2;
  --st-amber-200: #FBD0A5;
  --st-amber-300: #F7B270;
  --st-amber-400: #F29A4B; /* Dark Mode Logo & Luminous Highlight */
  --st-amber-500: #D97724; /* Signature Brand Mark Hex */
  --st-amber-600: #B55D12; /* Light UI Primary CTA (WCAG AA ≥4.61:1 w/ white) */
  --st-amber-700: #94490D;
  --st-amber-800: #763A0B;
  --st-amber-900: #5E2F0A;
  --st-amber-950: #361904;

  /* Kinetic Flow Jade (In-Motion / Momentum / Completed) */
  --st-flow-50:   #F0FAF6;
  --st-flow-100:  #E3F5EE;
  --st-flow-400:  #3CC493;
  --st-flow-500:  #22A376;
  --st-flow-600:  #17825C;

  /* Focus Cobalt (Secondary Accent — Deep Focus / Queued / Links) */
  --st-cobalt-50:  #EEF3FE;
  --st-cobalt-100: #DCE7FD;
  --st-cobalt-400: #6B93F6;
  --st-cobalt-500: #3867D6;
  --st-cobalt-600: #2B54B8;

  /* Status: Distinct Caution Ochre (Never confused with Burnished Amber CTAs) */
  --st-caution-50:  #FEFCE8;
  --st-caution-100: #FEF3C7;
  --st-caution-400: #FACC15;
  --st-caution-600: #A16207;

  /* Status: Friction / Blocked / Destructive */
  --st-danger-50:  #FEF2F2;
  --st-danger-400: #F87171;
  --st-danger-600: #DC2626;

  /* ── 2. Semantic Surface, Text & Border Tokens (Light) ──────────── */
  --bg-canvas:          var(--st-stone-50);
  --bg-surface:         #FFFFFF;
  --bg-elevated:        #FFFFFF;
  --bg-subtle:          var(--st-stone-100);
  --bg-muted:           var(--st-stone-200);
  --bg-accent-subtle:   var(--st-amber-50);
  --bg-flow-subtle:     var(--st-flow-50);
  --bg-focus-subtle:    var(--st-cobalt-50);
  --bg-caution-subtle:  var(--st-caution-50);
  --bg-danger-subtle:   var(--st-danger-50);

  --text-primary:       var(--st-ink);
  --text-secondary:     var(--st-stone-600);
  --text-muted:         var(--st-stone-500);
  --text-on-accent:     #FFFFFF;

  --border-subtle:      #EAE4DC;
  --border-default:     var(--st-stone-200);
  --border-strong:      var(--st-stone-300);
  --border-focus:       var(--st-amber-500);

  --accent-primary:       var(--st-amber-600);
  --accent-primary-hover: var(--st-amber-700);
  --accent-brand-mark:    var(--st-amber-500);
  --accent-flow:          var(--st-flow-600);
  --accent-focus:         var(--st-cobalt-600);
  --status-caution:       var(--st-caution-600);
  --status-danger:        var(--st-danger-600);

  /* ── 3. Data Visualization & Habit Heatmap Palette (Light) ──────── */
  --chart-1: #D97724; /* Burnished Amber — Sparks initiated */
  --chart-2: #17825C; /* Flow Jade — Tasks completed / velocity */
  --chart-3: #3867D6; /* Focus Cobalt — Deep focus minutes */
  --chart-4: #7E4A9E; /* Mineral Plum — Creative / project work */
  --chart-5: #C24E5C; /* Terracotta Rose — High-stiction / stalled */
  --chart-6: #7A736B; /* Warm Slate — Historical baseline */

  --heatmap-0: #EFEBE4; /* 0 sparks (resting stone) */
  --heatmap-1: #FBD0A5; /* 1-2 sparks */
  --heatmap-2: #F29A4B; /* 3-4 sparks */
  --heatmap-3: #D97724; /* 5-7 sparks */
  --heatmap-4: #94490D; /* Peak flow day */

  /* ── 4. Tactile Shadows & Focus Rings ───────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 8px 24px -4px rgba(28, 25, 23, 0.08), 0 2px 6px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 20px 40px -8px rgba(28, 25, 23, 0.12), 0 4px 12px rgba(28, 25, 23, 0.05);
  --ring-focus: 0 0 0 3px rgba(217, 119, 36, 0.24);

  /* ── 5. Typography ──────────────────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', 'Instrument Serif', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── 6. Spatial Rhythm, Containers, Radii & Iconography ─────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --container-prose: 680px;  /* Notes, daily reflections, blog articles */
  --container-queue: 840px;  /* Focused task list / threshold queue */
  --container-app:   1200px; /* Full dashboard / multi-pane workspace */

  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-stroke:  1.75; /* Matches S1 rounded corner weight on 24x24 grid */

  /* Z-Index Architecture */
  --z-base:    1;
  --z-sticky:  20;
  --z-drawer:  40;
  --z-command: 60; /* ⌘K Command Bar */
  --z-modal:   80;
  --z-toast:   100;

  /* ── 7. Physics Motion Curves ("Threshold & Breakaway") ─────────── */
  --ease-tension:   cubic-bezier(0.2, 0, 0, 1);       /* Static resistance on press */
  --ease-breakaway: cubic-bezier(0.16, 1, 0.3, 1);    /* Crisp snap across μs into glide */
  --ease-flow:      cubic-bezier(0.25, 1, 0.5, 1);    /* Effortless kinetic continuation */
  --dur-instant:    90ms;
  --dur-breakaway:  220ms;
  --dur-glide:      360ms;
}

/* ── Dark Mode ("Obsidian Basalt & Warm Parchment") ────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas:          var(--st-stone-950);
  --bg-surface:         var(--st-stone-900);
  --bg-elevated:        var(--st-stone-850);
  --bg-subtle:          var(--st-stone-850);
  --bg-muted:           #2F2B28;
  --bg-accent-subtle:   rgba(242, 154, 75, 0.14);
  --bg-flow-subtle:     rgba(60, 196, 147, 0.12);
  --bg-focus-subtle:    rgba(107, 147, 246, 0.14);
  --bg-caution-subtle:  rgba(250, 204, 21, 0.12);
  --bg-danger-subtle:   rgba(248, 113, 113, 0.12);

  --text-primary:       var(--st-parchment);
  --text-secondary:     #A8A19A;
  --text-muted:         #6E6862;
  --text-on-accent:     #FFFFFF;

  --border-subtle:      var(--st-stone-800);
  --border-default:     #332E2B;
  --border-strong:      var(--st-stone-700);
  --border-focus:       var(--st-amber-400);

  --accent-primary:       var(--st-amber-500);
  --accent-primary-hover: var(--st-amber-400);
  --accent-brand-mark:    var(--st-amber-400);
  --accent-flow:          var(--st-flow-400);
  --accent-focus:         var(--st-cobalt-400);
  --status-caution:       var(--st-caution-400);
  --status-danger:        var(--st-danger-400);

  --chart-1: #F29A4B;
  --chart-2: #3CC493;
  --chart-3: #6B93F6;
  --chart-4: #B482D6;
  --chart-5: #EE7A87;
  --chart-6: #9E968D;

  --heatmap-0: #221F1D;
  --heatmap-1: #5E2F0A;
  --heatmap-2: #94490D;
  --heatmap-3: #D97724;
  --heatmap-4: #F7B270;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-md: 0 12px 28px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-lg: 0 24px 48px -8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --ring-focus: 0 0 0 3px rgba(242, 154, 75, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas:          var(--st-stone-950);
    --bg-surface:         var(--st-stone-900);
    --bg-elevated:        var(--st-stone-850);
    --bg-subtle:          var(--st-stone-850);
    --bg-muted:           #2F2B28;
    --bg-accent-subtle:   rgba(242, 154, 75, 0.14);
    --bg-flow-subtle:     rgba(60, 196, 147, 0.12);
    --bg-focus-subtle:    rgba(107, 147, 246, 0.14);
    --bg-caution-subtle:  rgba(250, 204, 21, 0.12);
    --bg-danger-subtle:   rgba(248, 113, 113, 0.12);
    --text-primary:       var(--st-parchment);
    --text-secondary:     #A8A19A;
    --text-muted:         #6E6862;
    --text-on-accent:     #FFFFFF;
    --border-subtle:      var(--st-stone-800);
    --border-default:     #332E2B;
    --border-strong:      var(--st-stone-700);
    --border-focus:       var(--st-amber-400);
    --accent-primary:       var(--st-amber-500);
    --accent-primary-hover: var(--st-amber-400);
    --accent-brand-mark:    var(--st-amber-400);
    --accent-flow:          var(--st-flow-400);
    --accent-focus:         var(--st-cobalt-400);
    --status-caution:       var(--st-caution-400);
    --status-danger:        var(--st-danger-400);
    --chart-1: #F29A4B;
    --chart-2: #3CC493;
    --chart-3: #6B93F6;
    --chart-4: #B482D6;
    --chart-5: #EE7A87;
    --chart-6: #9E968D;
    --heatmap-0: #221F1D;
    --heatmap-1: #5E2F0A;
    --heatmap-2: #94490D;
    --heatmap-3: #D97724;
    --heatmap-4: #F7B270;
  }
}