/* ====================================================================
   TOKENS.CSS — Theme Token Definitions
   Four variants: Hearth Dark, Hearth Light, Aegis Dark, Aegis Light
   ==================================================================== */

/* Layer order — declared once, governs the entire cascade */
@layer reset, tokens, base, layout, chrome, components, utilities;

@layer tokens {

/* ---- UNIVERSAL SCALES (theme-independent) ---- */
:root {
  /* Spacing */
  --space-2xs: 0.125rem;   /* ~2px  — hairline gaps */
  --space-xs:  0.25rem;    /* ~4px  — tight padding */
  --space-s:   0.375rem;   /* ~6px  — compact gaps */
  --space-m:   0.5rem;     /* ~8px  — default gap */
  --space-l:   0.75rem;    /* ~12px — comfortable padding */
  --space-xl:  1rem;       /* ~16px — section gaps */
  --space-2xl: 1.25rem;    /* ~20px — card/panel padding */
  --space-3xl: 1.75rem;    /* ~28px — major section breaks */
  --space-4xl: 2.5rem;     /* ~40px — page-level spacing */

  /* Font sizes */
  --text-2xs:  0.65rem;    /* micro labels */
  --text-xs:   0.75rem;    /* small labels, nav counts */
  --text-s:    0.85rem;    /* secondary text, captions */
  --text-base: 1rem;       /* body text */
  --text-m:    1.15rem;    /* slightly emphasized */
  --text-l:    1.4rem;     /* section headings */
  --text-xl:   1.7rem;     /* page headings */

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.06);
  --shadow-s:     0 2px 8px rgba(0,0,0,.08);
  --shadow-m:     0 4px 14px rgba(0,0,0,.18);
  --shadow-l:     0 6px 22px rgba(0,0,0,.22);
  --shadow-xl:    0 12px 30px rgba(0,0,0,.34);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.1);

  /* Letter spacing */
  --track-tight:  -0.01em;
  --track-normal:  0;
  --track-wide:    0.04em;
  --track-wider:   0.1em;
  --track-widest:  0.16em;
}

/* ---- FAMILY: HEARTH (fonts, shape, motifs — both modes) ---- */
[data-theme="hearth"] {
  --radius: 6px;
  --border-w: 1px;
  --font-display: 'Marcellus', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="hearth"][data-mode="dark"] {
  --bg: #15110d;
  --bg-2: #1d1813;
  --panel: #221c15;
  --panel-2: #2a2219;
  --line: #3a2f23;
  --line-2: #4a3b2a;
  --text: #ece0cd;
  --text-2: #b8a98f;
  --text-3: #8a7a63;
  --accent: #e0772f;
  --accent-2: #f0a85a;
  --accent-d: #b85a1d;
  --signal: #d9a441;
  --signal-d: #7a5615;
  --danger: #d94f2a;
  --success: #7fa05a;
  --texture: radial-gradient(ellipse at 50% 120%, rgba(224,119,47,.16), transparent 55%);
  --glow: 0 0 18px rgba(224,119,47,.25);
}

[data-theme="hearth"][data-mode="light"] {
  --bg: #f4ece0;
  --bg-2: #ece2d2;
  --panel: #fbf6ec;
  --panel-2: #f3e9d8;
  --line: #d8c8ac;
  --line-2: #c4a882;
  --text: #2a2018;
  --text-2: #5d4f40;
  --text-3: #8a7a66;
  --accent: #c25a1d;
  --accent-2: #e0772f;
  --accent-d: #9a4715;
  --signal: #9a6f1f;
  --signal-d: #c2913a;
  --danger: #a83218;
  --success: #4f6138;
  --texture: radial-gradient(ellipse at 50% 120%, rgba(194,90,29,.10), transparent 55%);
  --glow: 0 2px 10px rgba(58,40,22,.18);
}

/* ---- FAMILY: AEGIS (fonts, shape, motifs — both modes) ---- */
[data-theme="aegis"] {
  --radius: 3px;
  --border-w: 1px;
  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="aegis"][data-mode="dark"] {
  --bg: #0c1014;
  --bg-2: #11171d;
  --panel: #141c24;
  --panel-2: #1a242e;
  --line: #243240;
  --line-2: #33485a;
  --text: #d6e2ea;
  --text-2: #8ea3b3;
  --text-3: #5f7385;
  --accent: #34c5c0;
  --accent-2: #6fe0db;
  --accent-d: #1d6f6c;
  --signal: #f0a830;
  --signal-d: #7a5615;
  --danger: #e0556b;
  --success: #52c47a;
  --texture: linear-gradient(rgba(52,197,192,.035) 1px, transparent 1px),
             linear-gradient(90deg, rgba(52,197,192,.035) 1px, transparent 1px);
  --glow: 0 0 0 3px rgba(52,197,192,.18);
}

[data-theme="aegis"][data-mode="light"] {
  --bg: #eef2f4;
  --bg-2: #e4eaed;
  --panel: #f8fbfc;
  --panel-2: #eaf1f3;
  --line: #c6d2d8;
  --line-2: #a9bcc4;
  --text: #0e1a20;
  --text-2: #3f5560;
  --text-3: #6d818c;
  --accent: #0f7d78;
  --accent-2: #1ba39d;
  --accent-d: #0a5b57;
  --signal: #b06f12;
  --signal-d: #caa24a;
  --danger: #c23350;
  --success: #2f8f55;
  --texture: linear-gradient(rgba(15,125,120,.05) 1px, transparent 1px),
             linear-gradient(90deg, rgba(15,125,120,.05) 1px, transparent 1px);
  --glow: 0 1px 6px rgba(14,26,32,.15);
}

} /* end @layer tokens */

/* ---- FONT FACE DECLARATIONS (scoped per family for lazy loading) ---- */
/* @font-face cannot live inside @layer — they remain unlayered (by spec). */

/* Hearth fonts — only downloaded when data-theme="hearth" is active */
@font-face {
  font-family: 'Marcellus';
  src: url('/static/fonts/hearth/marcellus-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/static/fonts/hearth/newsreader-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/static/fonts/hearth/newsreader-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url('/static/fonts/hearth/newsreader-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/hearth/jetbrains-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Aegis fonts — only downloaded when data-theme="aegis" is active */
@font-face {
  font-family: 'Chakra Petch';
  src: url('/static/fonts/aegis/chakra-petch-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chakra Petch';
  src: url('/static/fonts/aegis/chakra-petch-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/aegis/ibm-plex-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/aegis/ibm-plex-sans-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/aegis/ibm-plex-sans-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/aegis/ibm-plex-mono-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}