/* ============================================================
   Kon — Colors & Type
   Single source of truth for CSS variables + semantic type.
   Import this into any Kon design artefact.
   ============================================================ */

/* --- Brand Webfonts (local woff2, shipped with Kon) --- */
@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: #e8a87c;

  /* — Text (warm hierarchy) — */
  --text: #f0ece4;
  --text-secondary: #9a9486;
  --text-tertiary: #716b60;

  /* — Accent (amber/copper — always meaningful) — */
  --accent: #e8a87c;
  --accent-hover: #d4976a;
  --accent-subtle: #e8a87c10;
  --accent-glow: #e8a87c25;

  /* — Semantic — */
  --success: #7ec89a;
  --danger: #e87171;
  --warning: #e8c86e;

  /* — 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(232,168,124,0.3);

  /* — 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;
  --text-tertiary: #8a8578;

  --accent: #b87a4a;
  --accent-hover: #a06b3e;
  --accent-subtle: #b87a4a10;
  --accent-glow: #b87a4a20;

  --success: #3d8a5a;
  --danger: #c44d4d;
  --warning: #b89a3e;
}

/* ============================================================
   Sensory Zones — tint surfaces only, accent stays amber.
   ============================================================ */
:root[data-zone="cave"]   { --bg:#0f1214; --bg-elevated:#141a1e; --bg-card:#171f24; --sidebar:#0d1012; }
:root[data-zone="energy"] { --bg:#100e0b; --bg-elevated:#1c1815; --bg-card:#211d18; --sidebar:#141110; }
:root[data-zone="reset"]  { --bg:#0e100e; --bg-elevated:#161a16; --bg-card:#1a1f1a; --sidebar:#0c0e0c; }

:root[data-theme="light"][data-zone="cave"]   { --bg:#f0f5f7; --bg-elevated:#e8f0f2; --bg-card:#f5fafc; --sidebar:#eaf2f4; }
:root[data-theme="light"][data-zone="energy"] { --bg:#faf7f3; --bg-elevated:#f5f0e8; --bg-card:#fffcf7; --sidebar:#f5f0ea; }
:root[data-theme="light"][data-zone="reset"]  { --bg:#f3f7f2; --bg-elevated:#edf2ea; --bg-card:#f8fcf6; --sidebar:#eff4ec; }

/* ============================================================
   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; }

/* Kon 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; }
}
