/* ============================================================
   Lumotia — Colors & Type (preview surface only)

   Reflects the runtime tokens defined in src/app.css @theme.
   The runtime app reads from app.css; this file exists so the
   static preview pages under design-system/preview/*.html render
   with the same values without bringing in the Tailwind v4 build.

   When app.css @theme changes, mirror the change here. There is
   no automated sync; intentional duplication keeps the preview
   pages buildless.
   ============================================================ */

/* --- Brand Webfonts (local woff2, shipped with Lumotia) ---
   Mirrored from src/app.css. Duplication is intentional: this file is
   loaded directly by buildless preview HTML under design-system/preview/,
   which does not go through Tailwind/Vite, so the fonts must be declared
   here as well. The src URLs are relative (fonts/...) because the preview
   pages live next to this file; the runtime copy in app.css uses
   root-absolute paths (/fonts/...) served by Vite. Keep font-family,
   font-weight, font-style, and font-display in sync between both copies. */
@font-face {
  font-family: 'Lexend';
  src: url('fonts/lexend-variable.woff2') format('woff2-variations'),
       url('fonts/lexend-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono.woff2') format('woff2-variations'),
       url('fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/atkinson-hyperlegible-next.woff2') format('woff2-variations'),
       url('fonts/atkinson-hyperlegible-next.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('fonts/opendyslexic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Design Tokens — Dark Theme (default)
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* — Surfaces (warm layered depth) — */
  --bg: #0f0e0c;
  --bg-elevated: #171614;
  --bg-card: #1b1a17;
  --bg-input: #151412;
  --sidebar: #13120f;
  --nav-active: #201e1a;
  --hover: #1e1c18;

  /* — Borders — */
  --border: #2c2923;
  --border-subtle: #221f1b;
  --border-focus: #d68450;

  /* — Text (warm hierarchy) — */
  --text: #f0ece4;
  --text-secondary: #9a9486;
  /* Phase 10a a11y P1: lifted from #716b60 to #8c8678 to clear AA 4.5:1. */
  --text-tertiary: #8c8678;

  /* — Accent (amber/copper, always meaningful) —
     Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so
     white text on accent fill clears AA in dark theme. Phase 10b: chroma
     bumped to #d68450 — same lightness band, more saturation. */
  --accent: #d68450;
  --accent-hover: #c47340;
  --accent-subtle: #d6845010;
  --accent-glow: #d6845025;

  /* — Semantic — Phase 10b chroma bump for clearer signal. — */
  --success: #5fc28a;
  --danger: #e85f5f;
  --warning: #e8be4a;

  /* — Overlays — modal scrim. Derived from --bg #0f0e0c at 0.7 alpha. — */
  --overlay-dim: rgba(15, 14, 12, 0.7);

  /* — Radii — */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* — Spacing (4px base) — */
  --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;

  /* — Shadow (warm, low-contrast) — */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.35);
  --shadow-accent: 0 4px 20px rgba(214,132,80,0.3);

  /* — Amber shadow scale, theme-aware so glows stay on-hue in light mode.
     Mirrors the runtime tokens in app.css @theme. Shapes:
       sm     = subtle button/toggle glow
       md     = lifted card / button drop
       lg     = hero glow under the record button (== --shadow-accent)
       glow   = stronger 0.4-alpha emission (progress bars)
       pill   = small selected-pill lift
       raised = soft raised tile — */
  --shadow-accent-sm: 0 0 8px rgba(214, 132, 80, 0.25);
  --shadow-accent-md: 0 4px 16px rgba(214, 132, 80, 0.3);
  --shadow-accent-lg: 0 4px 20px rgba(214, 132, 80, 0.3);
  --shadow-accent-glow: 0 0 8px rgba(214, 132, 80, 0.4);
  --shadow-accent-pill: 0 1px 4px rgba(214, 132, 80, 0.3);
  --shadow-accent-raised: 0 2px 8px rgba(214, 132, 80, 0.2);

  /* — Focus ring shadow on inputs. Theme-aware so the ring stays visible
     on the lighter cream surfaces in light theme, where a 0.1 alpha amber
     glow disappears against white. — */
  --accent-shadow-focus: rgba(214, 132, 80, 0.1);

  /* — Typography — */
  --font-body: 'Lexend', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-accessible: 'Atkinson Hyperlegible Next', 'Lexend', sans-serif;
  --font-dyslexic: 'OpenDyslexic', 'Lexend', sans-serif;

  /* — Type scale (Major Third 1.250, base 16) — */
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-h4: 18px;
  --text-h3: 21px;
  --text-h2: 26px;
  --text-h1: 32px;
  --text-wordmark: 26px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-transcript: 1.85;

  /* — Motion — */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-ui: 150ms;
  --duration-decorative: 300ms;
  --duration-zone: 400ms;
}

/* ============================================================
   Light Theme
   ============================================================ */
:root[data-theme="light"] {
  --bg: #faf8f5;
  --bg-elevated: #f3f0eb;
  --bg-card: #ffffff;
  --bg-input: #f0ede8;
  --sidebar: #f5f2ed;
  --nav-active: #eae6e0;
  --hover: #ede9e3;

  --border: #ddd8d0;
  --border-subtle: #e6e2da;

  --text: #1a1816;
  --text-secondary: #5c574d;
  /* Phase 10a a11y P1: darkened from #8a8578 to #6b6557 to clear AA 4.5:1
     on cream/card surfaces in light theme. */
  --text-tertiary: #6b6557;

  /* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on
     accent fill (selected pills, primary buttons) clears AA. Phase 10b:
     chroma bumped to #a3683a — more saturation, AA preserved. */
  --accent: #a3683a;
  --accent-hover: #8a542b;
  --accent-subtle: #a3683a10;
  --accent-glow: #a3683a20;

  /* Light-theme amber shadows — mirror the dark-theme scale but use the
     light accent rgba so glows stay on-hue against cream surfaces. */
  --shadow-accent-sm: 0 0 8px rgba(163, 104, 58, 0.25);
  --shadow-accent-md: 0 4px 16px rgba(163, 104, 58, 0.3);
  --shadow-accent-lg: 0 4px 20px rgba(163, 104, 58, 0.3);
  --shadow-accent-glow: 0 0 8px rgba(163, 104, 58, 0.4);
  --shadow-accent-pill: 0 1px 4px rgba(163, 104, 58, 0.3);
  --shadow-accent-raised: 0 2px 8px rgba(163, 104, 58, 0.2);

  /* Phase 10a a11y G3 / FR3 / D4: success and danger darkened so coloured
     text on light surfaces clears AA. Phase 10b: chroma bumped, lightness
     preserved or slightly darkened to keep AA on cream. */
  --success: #1f7344;
  --danger: #b32626;
  --warning: #a08a1f;

  /* Warm dim for modal scrim in light theme. */
  --overlay-dim: rgba(26, 24, 22, 0.55);

  /* Stronger alpha on the focus ring shadow so it reads against the
     cream surfaces. Uses the darker light-theme accent base. */
  --accent-shadow-focus: rgba(163, 104, 58, 0.18);
}

/* ============================================================
   Sensory Zones — tint surfaces only, accent stays amber.
   Phase 10b: tints pushed further apart so each zone reads as a
   distinct emotional environment. AA on body text verified for
   each Card surface in both themes.
   ============================================================ */
:root[data-zone="cave"]   { --bg:#0a1218; --bg-elevated:#0f1a22; --bg-card:#14222b; --sidebar:#080f14; }
:root[data-zone="energy"] { --bg:#160e09; --bg-elevated:#20140e; --bg-card:#261913; --sidebar:#100806; }
:root[data-zone="reset"]  { --bg:#0c130c; --bg-elevated:#111a11; --bg-card:#161f15; --sidebar:#0a0e0a; }

:root[data-theme="light"][data-zone="cave"]   { --bg:#eef4f6; --bg-elevated:#e2eef0; --bg-card:#f5fafc; --sidebar:#e8f0f2; }
:root[data-theme="light"][data-zone="energy"] { --bg:#fdf3eb; --bg-elevated:#f8e8d8; --bg-card:#fff8ef; --sidebar:#f5e8d4; }
:root[data-theme="light"][data-zone="reset"]  { --bg:#eff6ed; --bg-elevated:#e4f0e0; --bg-card:#f7fcf5; --sidebar:#e8f3e4; }

/* ============================================================
   Semantic elements — h1-h4, p, code, kbd, wordmark
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.k-wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-wordmark);
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

h1, .k-h1 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--text); }
h2, .k-h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--text); }
h2.k-display, .k-page-title { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-h2); line-height: var(--leading-snug); color: var(--text); }
h3, .k-h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h3); line-height: var(--leading-snug); color: var(--text); }
h4, .k-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h4); line-height: var(--leading-snug); color: var(--text); }

p, .k-body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); color: var(--text); max-width: 75ch; }
.k-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); }
.k-small { font-size: var(--text-small); line-height: var(--leading-normal); color: var(--text-secondary); }
.k-caption { font-size: var(--text-caption); line-height: var(--leading-normal); color: var(--text-tertiary); letter-spacing: 0.02em; }
.k-eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); font-weight: 500; }

.k-transcript { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-transcript); letter-spacing: 0.01em; font-feature-settings: "liga" 1, "kern" 1; }

code, .k-code, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
kbd { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 11px; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-glow); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* Grain texture (2.5% dark / 1.5% light) — apply with .grain on a container */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
}
:root[data-theme="light"] .grain::after { opacity: 0.015; }

/* Lumotia sinhala glyph ක (U+0D9A) — wordmark companion */
.k-glyph::after { content: '\0D9A'; color: var(--accent); margin-left: 0.25em; display: inline-block; }

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