/* Hallmark · design-system tokens
 * genre: atmospheric · theme: WallCraft Dark · anchor-hue: 20 (signature coral) + 260 (deep slate)
 * Aligned with WallCraft Desktop Application design.md
 */

:root {
  color-scheme: dark;

  /* ── Canvas & Surface OKLCH Colors (260 Hue) ────────── */
  --color-paper:          oklch(0.145 0.008 260);  /* deep window canvas #101217 */
  --color-paper-2:        oklch(0.165 0.008 260);  /* sidebar / dock background */
  --color-paper-3:        oklch(0.185 0.008 260);  /* main content background */
  --color-paper-4:        oklch(0.205 0.008 260);  /* raised container backdrop */

  --color-surface-1:      oklch(0.220 0.008 260);  /* base card surface */
  --color-surface-2:      oklch(0.250 0.008 260);  /* nested surface & inputs */
  --color-surface-3:      oklch(0.280 0.008 260);  /* elevated surface & active tabs */
  --color-surface-hover:  oklch(0.950 0.006 260 / 0.05); /* interactive hover tint */

  --color-modal-bg:       oklch(0.200 0.008 260);
  --color-modal-overlay:  oklch(0.080 0.005 260 / 0.78);

  /* ── Rules & Dividers ───────────────────────────────── */
  --color-rule-subtle:    oklch(0.950 0.006 260 / 0.06);
  --color-rule:           oklch(0.950 0.006 260 / 0.10);
  --color-rule-strong:    oklch(0.950 0.006 260 / 0.16);

  /* ── Typography Inks ────────────────────────────────── */
  --color-ink:            oklch(0.940 0.005 260);  /* primary text */
  --color-ink-2:          oklch(0.880 0.005 260);  /* secondary text */
  --color-ink-muted:      oklch(0.600 0.010 260);  /* muted descriptions */
  --color-ink-dim:        oklch(0.480 0.010 260);  /* subtle helper text */
  --color-ink-faint:      oklch(0.380 0.010 260);  /* faint captions */

  /* ── Signature Accent: Coral / Terracotta (20 Hue) ─── */
  --color-accent:         oklch(0.700 0.170 20);   /* signature warm coral */
  --color-accent-ink:     oklch(0.140 0.010 20);   /* dark ink on accent button */
  --color-accent-light:   oklch(0.780 0.150 20);   /* accent hover */
  --color-accent-dim:     oklch(0.550 0.180 22);   /* accent pressed */
  --color-accent-glow:    oklch(0.700 0.170 20 / 0.22); /* focus glow */
  --color-accent-bg:      oklch(0.700 0.170 20 / 0.12); /* pill active fill */
  --color-focus:          oklch(0.700 0.170 20 / 0.55); /* focus halo */

  /* ── Semantic & Categorical Palette ─────────────────── */
  --color-danger:         oklch(0.650 0.200 25);   /* red: PresentMon, telemetry alert */
  --color-danger-bg:      oklch(0.650 0.200 25 / 0.12);
  --color-danger-glow:    oklch(0.650 0.200 25 / 0.25);

  --color-info:           oklch(0.750 0.140 215);  /* blue: Win32 FFI, Kernel, Discord Pipe */
  --color-info-bg:        oklch(0.750 0.140 215 / 0.12);
  --color-info-glow:      oklch(0.750 0.140 215 / 0.25);

  --color-warning:        oklch(0.780 0.160 70);   /* amber: status alerts */
  --color-warning-bg:     oklch(0.780 0.160 70 / 0.12);

  --color-success:        oklch(0.750 0.140 155);  /* emerald: 0.0% GPU, checked, live */
  --color-success-bg:     oklch(0.750 0.140 155 / 0.12);

  /* ── Border Accents & Micro Highlights ─────────────── */
  --color-accent-border:  oklch(0.700 0.170 20 / 0.25);
  --color-danger-border:  oklch(0.650 0.200 25 / 0.25);
  --color-info-border:    oklch(0.750 0.140 215 / 0.25);
  --color-warning-border: oklch(0.780 0.160 70 / 0.25);
  --color-success-border: oklch(0.750 0.140 155 / 0.25);
  --color-accent-subtle:  oklch(0.700 0.170 20 / 0.04);
  --color-grid-mesh:      oklch(0.950 0.006 260 / 0.04);
  --color-surface-spotlight: oklch(0.250 0.010 260);

  /* ── Chrome, Glass & Lighting Tokens ────────────────── */
  --nav-bg:               oklch(0.165 0.008 260 / 0.82);
  --nav-bg-scrolled:      oklch(0.145 0.008 260 / 0.94);
  --top-bar-bg:           oklch(0.145 0.008 260 / 0.90);
  --highlight-btn:        inset 0 1px 0 0 oklch(1 0 0 / 0.28);
  --highlight-btn-hover:  inset 0 1px 0 0 oklch(1 0 0 / 0.35);
  --highlight-btn-small:  inset 0 1px 0 0 oklch(1 0 0 / 0.25);
  --shadow-window:        0 12px 24px oklch(0 0 0 / 0.5);
  --shadow-inset:         inset 0 2px 8px oklch(0 0 0 / 0.5);
  --shadow-drag:          0 12px 28px oklch(0 0 0 / 0.7);
  --shadow-drawer:        10px 0 30px oklch(0 0 0 / 0.8);
  --shadow-nav:           0 8px 32px oklch(0 0 0 / 0.45);
  --shadow-nav-scrolled:  0 12px 36px oklch(0 0 0 / 0.65);

  /* ── Syntax Tokens ──────────────────────────────────── */
  --color-syn-kw:         var(--color-accent);
  --color-syn-type:       var(--color-info);
  --color-syn-func:       oklch(0.850 0.120 85);
  --color-syn-num:        oklch(0.780 0.160 70);
  --color-syn-str:        var(--color-success);
  --color-syn-prop:       oklch(0.800 0.120 320);

  /* ── Ambient Background Blooms ──────────────────────── */
  --color-bloom-1:        oklch(0.240 0.040 260 / 0.38); /* deep blue slate glow */
  --color-bloom-2:        oklch(0.700 0.170 20 / 0.06);  /* subtle coral ambient reflection */

  /* ── Typography Families (Outfit + Inter + JetBrains Mono) */
  --font-display:  'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-outlier:  'JetBrains Mono', 'Geist Mono', 'Cascadia Code', monospace;

  /* Legacy semantic mappings for components & docs */
  --font-sans:        var(--font-body);
  --font-mono:        var(--font-outlier);
  --text-primary:     var(--color-ink);
  --text-secondary:   var(--color-ink-2);
  --text-muted:       var(--color-ink-muted);
  --text-dim:         var(--color-ink-dim);
  --bg-base:          var(--color-paper);
  --bg-card:          var(--color-surface-1);
  --border-subtle:    var(--color-rule-subtle);
  --border-medium:    var(--color-rule);
  --border-strong:    var(--color-rule-strong);
  --accent-primary:   var(--color-accent);
  --accent-hover:     var(--color-accent-light);
  --accent-emerald:   var(--color-success);

  /* ── Type Scale ─────────────────────────────────────── */
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-md:        1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       2rem;
  --text-4xl:       2.5rem;
  --text-display-s: clamp(1.8rem, 2.8vw + 0.5rem, 2.5rem);
  --text-display:   clamp(2.4rem, 4.2vw + 0.5rem, 3.8rem);
  --text-display-l: clamp(2.8rem, 5.5vw + 1rem, 5rem);

  /* ── 4-pt Spacing Scale ─────────────────────────────── */
  --space-3xs:  0.25rem;  /* 4px */
  --space-2xs:  0.5rem;   /* 8px */
  --space-xs:   0.75rem;  /* 12px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.25rem;  /* 20px */
  --space-lg:   1.5rem;   /* 24px */
  --space-xl:   2rem;     /* 32px */
  --space-2xl:  3rem;     /* 48px */
  --space-3xl:  4.5rem;   /* 72px */
  --space-4xl:  6rem;     /* 96px */

  /* ── Motion & Transitions ───────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-normal:  200ms;
  --dur-slow:    350ms;

  --transition-fast:   var(--dur-fast) var(--ease-out);
  --transition-normal: var(--dur-normal) var(--ease-out);

  /* ── Radii ──────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ── Specular Lighting & Depth ──────────────────────── */
  --highlight-top: inset 0 1px 0 0 oklch(1 0 0 / 0.08);
  --shadow-card:   0 8px 24px oklch(0 0 0 / 0.35);
  --shadow-elevated: 0 16px 48px oklch(0 0 0 / 0.55), inset 0 1px 0 0 oklch(1 0 0 / 0.08);

  /* ── Z-Index (7-Level Named Scale) ──────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;
}