/* Benerra Academy: design tokens. The ONLY file with hex colours (C4.3.1, rule 15).
   Three layers: base palette (theme-independent) -> working tokens per theme -> composite tokens.
   Components use working and composite tokens only. Contrast table: Decisions/Design system.md
   (recomputed by Tools/contrast_table.py from this file). */

/* ---------- Fonts (local files, OFL 1.1, see ../fonts/OFL.txt) ---------- */
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Serif"; src: url("../fonts/RobotoSerif-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- 1. Base palette (hex lives only here) ---------- */
:root {
  --ink-950: #151414;   /* Benerra ink */
  --ink-900: #1A1A1A;   /* ink panel */
  --ink-850: #232121;
  --ink-800: #2C2A2A;
  --ink-700: #2E2C2C;   /* ink panel, secondary */
  --neutral-600: #5F5C5C;
  --neutral-500: #7A7777;
  --neutral-450: #8A8686;
  --neutral-400: #A9A6A5;
  --neutral-300: #B9B7B5;
  --neutral-250: #DAD7D5;
  --neutral-200: #E0DEDE;
  --neutral-150: #E1DEDD;
  --neutral-125: #E6E4E4;
  --neutral-100: #EAE7E6;
  --paper-100: #EFECEB;
  --paper-50: #F6F4F4;  /* Benerra paper */
  --paper-0: #F9F9F8;
  --white: #FFFFFF;

  --red-500: #DC0A26;   /* Benerra red: fills, bars, the mark. The only accent */
  --red-600: #C40921;   /* red text on light (5.6:1 on paper) and pressed fill */
  --red-400: #F0334A;   /* large red text on dark (4.6:1 on ink) */
  --red-300: #F2586E;   /* red text on dark (5.6:1 on ink) */
  --red-soft-light: #F4E1E4;  /* solid, red 8 % over paper */
  --scrim-over-paper: #868484; /* solid, the light scrim (ink 50 %) over paper: canvas under a modal */
  --scrim-over-ink: #080808;   /* solid, the dark scrim (black 62 %) over ink */
  --red-soft-dark: #331217;   /* solid, red 15 % over ink */
  --red-mark-light: #F7D9DD;
  --red-mark-dark: #4A1820;

  --error-600: #A8430F;  /* burnt orange: errors, never a shade of the accent */
  --error-300: #F59E6B;
  --error-soft-light: #EEE2DD;
  --error-soft-dark: #342720;
  --warn-600: #7A6210;
  --warn-300: #E3C565;
  --warn-soft-light: #EEEADF;
  --warn-soft-dark: #2E291E;

  --logo-mark: #DC0A26;  /* the mark is always this red, on any background */
}

/* ---------- 2. Working tokens: light theme (default) ---------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper-50);
  --surface: var(--paper-0);
  --surface-2: var(--paper-100);
  --surface-hover: var(--neutral-100);
  --surface-inverse: var(--ink-950);
  --on-inverse: var(--paper-50);
  --on-inverse-muted: var(--neutral-300);

  --text: var(--ink-950);
  --text-2: var(--ink-700);
  --text-muted: var(--neutral-600);
  --text-faint: var(--neutral-450);

  --line: rgba(21, 20, 20, .12);
  --line-soft: rgba(21, 20, 20, .07);
  --line-strong: var(--neutral-450);
  --track: var(--neutral-150);
  --grid-line: rgba(21, 20, 20, .06);

  --brand: var(--ink-950);
  --brand-hover: var(--ink-700);
  --on-brand: var(--paper-50);
  --brand-text: var(--ink-950);
  --brand-soft: var(--neutral-125);
  --brand-line: rgba(21, 20, 20, .45);

  --accent: var(--red-500);
  --accent-hover: var(--red-600);
  --on-accent: var(--white);
  --accent-large: var(--red-500);
  --accent-text: var(--red-600);
  --accent-soft: var(--red-soft-light);
  --accent-line: rgba(220, 10, 38, .4);

  --danger: var(--error-600);
  --danger-text: var(--error-600);
  --danger-soft: var(--error-soft-light);
  --warn: var(--warn-600);
  --warn-text: var(--warn-600);
  --warn-soft: var(--warn-soft-light);

  --mark-brand: var(--neutral-200);
  --mark-accent: var(--red-mark-light);
  --mark-neutral: var(--neutral-100);

  --focus: var(--ink-950);
  --scrim: rgba(21, 20, 20, .5);
  --canvas-scrim: var(--scrim-over-paper);   /* the scrollbar gutter beside an open modal, drawer or panel */
  --scroll-thumb: rgba(21, 20, 20, .28);

  --topbar-bg: var(--ink-950);
  --topbar-text: var(--paper-50);
  --topbar-muted: var(--neutral-300);
  --topbar-line: rgba(246, 244, 244, .14);

  --zoom-bg: var(--ink-950);
  --zoom-text: var(--paper-50);
  --zoom-muted: var(--neutral-300);
  --zoom-btn: var(--ink-700);
  --zoom-btn-hover: var(--ink-800);

  --motif-mark: var(--logo-mark);
  --motif-opacity: .07;
}

/* ---------- 2b. Working tokens: dark theme ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-2: var(--ink-850);
  --surface-hover: var(--ink-700);
  --surface-inverse: var(--paper-50);
  --on-inverse: var(--ink-950);
  --on-inverse-muted: var(--neutral-600);

  --text: var(--paper-50);
  --text-2: var(--neutral-250);
  --text-muted: var(--neutral-400);
  --text-faint: var(--neutral-450);

  --line: rgba(246, 244, 244, .14);
  --line-soft: rgba(246, 244, 244, .08);
  --line-strong: var(--neutral-500);
  --track: var(--ink-700);
  --grid-line: rgba(246, 244, 244, .06);

  --brand: var(--paper-50);
  --brand-hover: var(--white);
  --on-brand: var(--ink-950);
  --brand-text: var(--paper-50);
  --brand-soft: var(--ink-800);
  --brand-line: rgba(246, 244, 244, .45);

  --accent: var(--red-500);
  --accent-hover: var(--red-600);
  --on-accent: var(--white);
  --accent-large: var(--red-400);
  --accent-text: var(--red-300);
  --accent-soft: var(--red-soft-dark);
  --accent-line: rgba(242, 88, 110, .45);

  --danger: var(--error-300);
  --danger-text: var(--error-300);
  --danger-soft: var(--error-soft-dark);
  --warn: var(--warn-300);
  --warn-text: var(--warn-300);
  --warn-soft: var(--warn-soft-dark);

  --mark-brand: var(--ink-700);
  --mark-accent: var(--red-mark-dark);
  --mark-neutral: var(--ink-800);

  --focus: var(--paper-50);
  --scrim: rgba(0, 0, 0, .62);
  --canvas-scrim: var(--scrim-over-ink);
  --scroll-thumb: rgba(246, 244, 244, .26);

  --topbar-bg: var(--ink-950);
  --topbar-text: var(--paper-50);
  --topbar-muted: var(--neutral-300);
  --topbar-line: rgba(246, 244, 244, .14);

  --zoom-bg: var(--ink-950);
  --zoom-text: var(--paper-50);
  --zoom-muted: var(--neutral-300);
  --zoom-btn: var(--ink-700);
  --zoom-btn-hover: var(--ink-800);

  --motif-mark: var(--logo-mark);
  --motif-opacity: .07;
}

/* ---------- 3. Composite tokens: recomputed on every themed block (C4.3.1, Appendix 3.3 #12) ---------- */
:root, [data-theme] {
  --frame: inset 0 0 0 1px var(--line);
  --frame-soft: inset 0 0 0 1px var(--line-soft);
  --frame-strong: inset 0 0 0 1px var(--line-strong);
  --frame-brand: inset 0 0 0 1px var(--brand);
  --frame-brand-2: inset 0 0 0 2px var(--brand);
  --frame-accent: inset 0 0 0 1px var(--accent);
  --frame-accent-2: inset 0 0 0 2px var(--accent);
  --frame-danger: inset 0 0 0 1px var(--danger);
  --bar-accent: inset 0 3px 0 0 var(--accent);
  /* Benerra: no shadows. Kept as transparent zero shadows so lists like
     `box-shadow: var(--frame), var(--shadow-card)` stay valid (Appendix 3.2). */
  --shadow-card: 0 0 0 0 transparent;
  --shadow-pop: 0 0 0 0 transparent;
  --shadow-modal: 0 0 0 0 transparent;
  /* The single glow: the accent call-to-action button on hover. */
  --glow-cta: 0 10px 30px -10px rgba(220, 10, 38, .6);
  --ring-brand: 0 0 0 3px var(--brand-soft);
}

/* ---------- 4. Type, space, layout, shape, motion, layers ---------- */
:root {
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Roboto Serif", Georgia, Cambria, "Noto Serif", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", monospace;

  --fs-display: clamp(34px, 3.6vw, 48px);
  --fs-h1: clamp(28px, 2.6vw, 36px);
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-h4: 16px;
  --fs-read: 17px;
  --fs-body: 15px;
  --fs-sm: 13.5px;
  --fs-xs: 12px;
  --fs-eyebrow: 12px;
  --fs-badge: 11.5px;
  --fs-num-xl: clamp(40px, 4.4vw, 56px);
  --fs-num-lg: 32px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 500;   /* Roboto Serif headings and big figures */
  --ls-display: -.018em;
  --ls-eyebrow: .14em;
  --ls-badge: .06em;
  --lh-1: 1;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --lh-read: 1.65;

  /* spacing: name = value / 4 */
  --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-15: 60px; --space-20: 80px;

  --container: 1280px;
  --container-wide: 1440px;
  --page-pad: 40px;
  --topbar-h: 64px;
  --viewas-h: 44px;
  --rail: 264px;
  --admin-nav: 240px;
  --props: 320px;
  --reading: 720px;
  --lesson-col: 800px;
  --narrow: 520px;
  --narrow-wide: 960px;
  --gutter: 24px;
  --grid-cell: 34px;   /* Benerra dark grid in UI */

  /* symmetry rule: fixed row heights (C4.7.1) */
  --row-table: 64px;
  --row-list: 44px;
  --row-list-2: 64px;
  --row-card: 88px;
  --row-nav: 40px;
  --row-lesson: 112px;
  --row-toc: 64px;

  /* shape: Benerra soft corners, never above 14 px */
  --radius-0: 0;
  --radius-sm: 6px;       /* badges, chips, checkboxes, pagination, tooltips */
  --radius-control: 10px; /* buttons, fields, selects, segmented, menus */
  --radius-card: 14px;    /* cards, panels, modals, callouts, tables */
  --radius-pill: 10px;    /* guide name kept; Benerra has no pills */
  --radius-round: 50%;    /* avatar and status dots only */

  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;
  --field-h: 46px;
  --icon-btn: 40px;
  --icon-btn-sm: 36px;
  --icon-stroke: 1.75;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --z-sticky: 10;
  --z-header: 20;
  --z-drawer: 30;
  --z-dropdown: 40;
  --z-modal: 1000;
  --z-toast: 1100;
}

@media (max-width: 1079px) { :root { --page-pad: 24px; } }
@media (min-width: 1024px) and (max-width: 1279px) { :root { --admin-nav: 208px; } }
@media (max-width: 719px) { :root { --page-pad: 16px; --topbar-h: 56px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}