/* ============================================================
   CDL Co-Pilot — brand tokens
   ------------------------------------------------------------
   The single source of truth for colour, type, radius, shadow
   and motion. Loaded BEFORE style.css on every page.

   Canonical names follow the VFA communications palette, taken
   from ventureforafrica-site/src/styles/global.css so the
   product and the marketing site speak one language. The older
   --color-* / --shell-* / --card-* names are kept below as
   aliases pointing at these values, so existing call sites keep
   working and a rollback is a change to this file's values
   only — not a re-run of the whole refresh.

   Fonts are served from this origin (/fonts/*). No request to
   fonts.googleapis.com is made from any page.
   ============================================================ */

/* ---- Self-hosted VFA brand fonts (SIL OFL 1.1 — licences in ./fonts) ---- */
@font-face {
  font-family: "Bricolage Grotesque VFA";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/BricolageGrotesque-VF.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3 VFA";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSans3-VF.woff2") format("woff2");
}

:root {
  /* === Brand surfaces and ink ===
     --anchor is the same #32276c the app already used, so every
     purple in the product is unchanged. What changes is that it
     is now named for the brand rather than for a component. */
  --anchor: #32276c;
  --anchor-hover: #3d2f80; /* the app's existing lighter hover; not a VFA value */
  --anchor-deep: #241b52;

  --coral: #ff848c; /* emphasis accent: highlights, focus, active step */
  --coral-hover: #f06e77;
  --sky: #6bd4f9; /* informational fills only, never text on paper */
  --lime: #abd600; /* selection / "new" markers */

  --paper: #f8f7f5; /* the page */
  --paper-warm: #f1efec; /* alternating band, inset panel */
  --tint: #eeecf5; /* primary-tinted surface (badges, callouts) */
  --white: #ffffff; /* a card that sits on paper */

  --ink: #1c1d2b; /* headings, primary text */
  --muted: #5d5d6b; /* body, secondary text */
  --muted-quiet: #6d6d7b; /* tertiary/metadata — 4.9:1 on paper, passes AA at 14px.
                             Replaces the old #888, which measured 3.5:1. */
  --line: #dcd9e3;
  --line-strong: #c9c5d4;
  --line-soft: #eceef4; /* hairline inside a card, lighter than --line */

  /* === Status colours ===
     Deliberately NOT part of the brand palette. They carry meaning,
     so they stay stable across refreshes and keep their AA pairs. */
  --good: #0f7a46;
  --good-soft: #e8f5e9;
  --warn: #9a5b00;
  --warn-soft: #fff8e1;
  --bad: #b3261e;
  --bad-soft: #ffebee;
  --bad-line: #e8b8b2; /* the error card's edge: red enough to register, quiet enough to sit on paper */
  --premium: #f0c866; /* the retired gold, kept only where it means "upgrade" */
  --premium-hover: #e8b84a;

  /* === Type ===
     Bricolage carries display type (marketing, page titles, hero
     numerals). Source Sans 3 carries every word of UI, because a
     display grotesque at 14px in a data table loses its columns. */
  --font-display: "Bricolage Grotesque VFA", "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Source Sans 3 VFA", "Source Sans 3", system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem; /* the app's long-standing 14px body */
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* === Space === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* === Radius ===
     Soft by design. The marketing site's 2px corners are a print
     signature; at 14px in a product with cards, chips and inputs
     they read as broken rather than restrained. */
  /* The app grew a long tail of one-off radii (3,4,6,7,8,9,10,12,14,16,18,20px).
     These five steps absorb all of them without changing how anything looks:
     8px was the most common value in the product, so it gets its own step
     rather than being forced up to 10. */
  --radius-xs: 4px; /* tags, inline marks */
  --radius-sm: 6px; /* chips, small badges */
  --radius-control: 8px; /* inputs, buttons, segmented controls — the app default */
  --radius-md: 10px; /* panels inside a card */
  --radius-lg: 14px; /* cards, drawers, modals */
  --radius-pill: 999px; /* status pills, avatars-as-pills */

  /* === Elevation === */
  --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 1px 1px rgba(15, 17, 21, 0.02);
  --shadow-2: 0 2px 6px rgba(15, 17, 21, 0.06), 0 1px 2px rgba(15, 17, 21, 0.04);
  --shadow-3: 0 8px 24px rgba(15, 17, 21, 0.08), 0 2px 6px rgba(15, 17, 21, 0.04);
  /* Marketing pages name them by size; same three values. */
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);

  /* === Motion === */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 180ms;

  /* ============================================================
     Compatibility aliases — do not add new uses of these.
     ============================================================ */
  --color-primary: var(--anchor);
  --color-primary-hover: var(--anchor-hover);
  --color-primary-light: var(--tint);
  --color-accent: var(--coral);
  --color-accent-hover: var(--coral-hover);
  --color-text: var(--ink);
  --color-text-secondary: var(--muted);
  --color-text-tertiary: var(--muted-quiet);
  --color-border: var(--line);
  --color-bg: var(--paper);
  --color-card: var(--white);

  --card-good: var(--good);
  --card-warn: var(--warn);
  --card-bad: var(--bad);
  --card-muted: #6b7280; /* low-emphasis labels, AA on white */
  --card-divider: #eceef4; /* single hairline that groups the act zone */

  color-scheme: light;
}