/* BarazaBrief design tokens - source of truth: DESIGN.md sections 2, 3, 5.
   Zero hex outside this file. Light default; dark via [data-theme="dark"]
   or, when the user never chose, prefers-color-scheme. */

/* Self-hosted variable fonts (OFL, licences in assets/fonts/). latin + latin-ext split so
   African names render (b-hook, eng, open e ...) while latin-only pages fetch the small file. */
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/InterTight-latin.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter Tight"; src: url("/assets/fonts/InterTight-latin-ext.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Italic-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Italic-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F3F3EF;
  --surface-hover: #F7F7F4;

  --rule: #0B0B0B;
  --border: #D6D6D0;
  --border-hover: #0B0B0B;

  --text: #0B0B0B;
  --text-secondary: #3A3A38;
  --text-tertiary: #66665F;
  --text-inverse: #FFFFFF;

  --accent: #00875A;
  --accent-hover: #006B47;
  --accent-ink: #FFFFFF;
  --accent-text: #006B47;   /* small green text; passes AA on --surface-alt too */
  --accent-tint: #E3F3EC;

  --bg-rgb: 255, 255, 255;
  --text-rgb: 11, 11, 11;
  --accent-rgb: 0, 135, 90;

  --success: var(--accent);
  --error: #B42318;
  --warning: #9A5B00;
  --live: #D92D20;

  --font-display: "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --container: 80rem;
  --gutter-x: 32px;
  --gap: 24px;
  --ease: ease-out;
  --t-fast: 120ms;
  --t-med: 180ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E100F; --surface: #0E100F; --surface-alt: #171A18; --surface-hover: #1C201D;
  --rule: #ECECE6; --border: #33392F; --border-hover: #ECECE6;
  --text: #ECECE6; --text-secondary: #C3C6BE; --text-tertiary: #9A9F96; --text-inverse: #0E100F;
  --accent: #3DD68C; --accent-hover: #6BE3A9; --accent-ink: #0E100F; --accent-text: #3DD68C; --accent-tint: #13301F;
  --bg-rgb: 14, 16, 15; --text-rgb: 236, 236, 230; --accent-rgb: 61, 214, 140;
  --error: #FF7A6E; --warning: #F5B454; --live: #FF6B5E;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #0E100F; --surface: #0E100F; --surface-alt: #171A18; --surface-hover: #1C201D;
    --rule: #ECECE6; --border: #33392F; --border-hover: #ECECE6;
    --text: #ECECE6; --text-secondary: #C3C6BE; --text-tertiary: #9A9F96; --text-inverse: #0E100F;
    --accent: #3DD68C; --accent-hover: #6BE3A9; --accent-ink: #0E100F; --accent-text: #3DD68C; --accent-tint: #13301F;
    --bg-rgb: 14, 16, 15; --text-rgb: 236, 236, 230; --accent-rgb: 61, 214, 140;
    --error: #FF7A6E; --warning: #F5B454; --live: #FF6B5E;
  }
}

@media (max-width: 1023px) { :root { --gutter-x: 24px; } }
@media (max-width: 767px)  { :root { --gutter-x: 16px; --gap: 16px; } }