/* Brand fonts, self-hosted and subset to Latin (scripts/fonts.mjs). SIL Open Font Licence. */
@font-face { font-family: "Fjalla One"; src: url("/assets/fonts/fjalla-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/fonts/merriweather-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/fonts/merriweather-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/fonts/merriweather-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("/assets/fonts/merriweather-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Black Glass Capital design tokens (bgc-brand). Palette is fixed: no gradients, no other colours. */
:root {
  color-scheme: dark;
  /* Core palette */
  --bgc-black: #000000;
  --bgc-turquoise: #0FD5D5; /* accent only, never a flood; one statement band per page */
  --bgc-white: #FFFFFF;
  --bgc-grey: #C6C6C6;      /* dividers, charts, subtle graphics only; never body text */

  /* Review mode only (founder-gated flags). Never used in production styling. */
  --review-amber: #F5A623;

  /* Roles */
  --color-bg: var(--bgc-black);
  --color-text: var(--bgc-white);
  --color-accent: var(--bgc-turquoise);
  --color-rule: var(--bgc-grey);
  --color-bg-light: var(--bgc-white);
  --color-text-on-light: var(--bgc-black);
  --color-accent-text: var(--bgc-turquoise); /* turquoise as text or icon; black in light mode */
  --color-rule-soft: rgba(198, 198, 198, 0.4); /* card and tab outlines */
  --color-hover-bg: rgba(198, 198, 198, 0.08);
  --color-field-border: var(--bgc-white);
  --fm-margin: var(--bgc-turquoise);
  --fm-ours: var(--bgc-grey);
  --fm-label: var(--bgc-grey);

  /* Typography */
  --font-headline: "Fjalla One", "Arial Narrow", Arial, sans-serif; /* weight 400 only */
  --font-body: "Merriweather", Georgia, "Times New Roman", serif;   /* 300 / 400 / 500 / 600 */

  /* Type scale (bgc-brand working standard, fluid between 375px and 1280px) */
  --text-hero: clamp(3rem, 2rem + 4.4vw, 6rem);
  --text-h1: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-h3: 1.25rem;
  --text-eyebrow: 1.25rem; /* was 0.8125rem; +50% (Al, 8 October) */
  --text-body: 1rem;
  --text-lead: 1.125rem;
  --text-small: 0.8125rem;
  --leading-body: 1.7;
  --leading-tight: 1.1;
  --tracking-eyebrow: 0.06em;

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);

  /* Layout */
  --measure: 38rem;
  --container: 76rem;
  --header-height: 4.5rem;
  --rule: 1px solid var(--color-rule);
  --rule-full: 1px solid var(--color-rule-soft); /* full-width dividers: brand grey at 40%, a mid grey on black */

  /* Interaction */
  --focus-ring: 3px solid var(--color-focus);
  --color-focus: var(--bgc-turquoise);
  --focus-offset: 3px;
  --hit-min: 2.75rem; /* 44px comfortable touch target */
  --duration: 200ms;
}

/* Light mode (Al, 9 October): bgc-brand "On White". Set by the head script from the visitor's choice or device
   setting. Turquoise fails contrast as text on white (1.6:1), so text and icons that are turquoise on black turn
   black here; turquoise stays for fills, rules and markers. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--bgc-white);
  --color-text: var(--bgc-black);
  --color-accent-text: var(--bgc-black);
  --color-rule-soft: rgba(0, 0, 0, 0.18);
  --color-hover-bg: rgba(0, 0, 0, 0.04);
  --color-field-border: var(--bgc-black);
  --color-focus: var(--bgc-black);
  --fm-margin: var(--bgc-turquoise);
  --fm-ours: var(--bgc-black);
  --fm-label: var(--bgc-black);
}