/* ==========================================================================
   Digital Unicorn: design tokens
   ==========================================================================
   The source of truth for every colour, size and spacing value on the site.
   Nothing else in this codebase may hardcode a colour or a font size.

   Ported from the Next.js build (web/app/globals.css) with Tailwind removed.
   The values are unchanged. Only the delivery mechanism differs: these are
   plain CSS custom properties, so they work with plain CSS, with SCSS, and
   inside a WordPress theme with no build step and no framework.

   Two house rules are encoded in the numbers below and must not be edited
   away:
     1. 13px is the floor. No text on this site is smaller than 13px.
     2. Sentence case only. There is no uppercase transform in the type
        scale, including on "overline", which is a tracked small label and
        not an all-caps style.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     Typeface. Aeonik is self-hosted, see base.css for the @font-face rules.
     Titles are set at Medium (500), which is why every heading token below
     carries weight 500 rather than the browser default bold.
     ---------------------------------------------------------------------- */
  --font-brand: "Aeonik";
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* ----------------------------------------------------------------------
     SEMANTIC COLOUR: the API you build with.
     Reach for these, not the primitive ramps further down. Changing a
     semantic token restyles the whole site coherently. Changing a primitive
     changes one shade and usually breaks the relationship it was part of.
     ---------------------------------------------------------------------- */
  --background: #ffffff;
  --background-subtle: #f7f8f9;
  --background-muted: #edeef0;
  --surface: #ffffff;
  --surface-raised: #ffffff;

  --foreground: #121417;
  --muted-foreground: #4b5259;
  --subtle-foreground: #9aa1ab;

  --border: #dde0e4;
  --border-subtle: #edeef0;
  --border-strong: #c4c9d0;

  --brand: #0052f8;
  --brand-hover: #0045d6;
  --brand-subtle: #e9f0ff;
  --brand-foreground: #ffffff;
  --brand-on-dark: #6196ff; /* the brand on dark bands, where #0052f8 is too dark to read */

  --success: #12b76a;
  --success-subtle: #e6f7ef;
  --success-foreground: #027a48;

  --warning: #f79009;
  --warning-subtle: #fef3e6;
  --warning-foreground: #b54708;

  --destructive: #f04438;
  --destructive-subtle: #feeceb;
  --destructive-foreground: #b42318;

  --info: #0052f8;
  --info-subtle: #e9f0ff;
  --info-foreground: #0037ab;

  --ring: #0052f8;

  /* ----------------------------------------------------------------------
     PRIMITIVE RAMPS.
     The raw palette the semantic tokens are drawn from. Use these only when
     no semantic token fits, which should be rare.
     ---------------------------------------------------------------------- */

  /* Brand blue. 500 is the brand colour, #0052F8. */
  --color-blue-50: #e9f0ff;
  --color-blue-100: #cfdeff;
  --color-blue-200: #a3c0ff;
  --color-blue-300: #6e9bff;
  --color-blue-400: #3b77ff;
  --color-blue-500: #0052f8;
  --color-blue-600: #0045d6;
  --color-blue-700: #0037ab;
  --color-blue-800: #002a82;
  --color-blue-900: #001e5c;

  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f8f9;
  --color-neutral-100: #edeef0;
  --color-neutral-200: #dde0e4;
  --color-neutral-300: #c4c9d0;
  --color-neutral-400: #9aa1ab;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5259;
  --color-neutral-700: #343a40;
  --color-neutral-800: #1f2327;
  --color-neutral-900: #121417;
  --color-neutral-1000: #000000;

  /* ----------------------------------------------------------------------
     TYPE SCALE.
     Every style carries four values that belong together: size, line height,
     tracking and weight. They are declared separately here so a single
     number can be tuned, and applied together by the classes in type.css.

     Always apply a whole style (.text-h1) rather than picking off one value.
     Splitting them is how type drifts.
     ---------------------------------------------------------------------- */

  --text-display-2xl-size: 72px;
  --text-display-2xl-line: 76px;
  --text-display-2xl-tracking: -0.025em;
  --text-display-2xl-weight: 500;

  --text-display-xl-size: 60px;
  --text-display-xl-line: 64px;
  --text-display-xl-tracking: -0.025em;
  --text-display-xl-weight: 500;

  --text-display-lg-size: 48px;
  --text-display-lg-line: 52px;
  --text-display-lg-tracking: -0.02em;
  --text-display-lg-weight: 500;

  --text-h1-size: 40px;
  --text-h1-line: 44px;
  --text-h1-tracking: -0.015em;
  --text-h1-weight: 500;

  --text-h2-size: 32px;
  --text-h2-line: 38px;
  --text-h2-tracking: -0.015em;
  --text-h2-weight: 500;

  --text-h3-size: 28px;
  --text-h3-line: 34px;
  --text-h3-tracking: -0.01em;
  --text-h3-weight: 500;

  --text-h4-size: 24px;
  --text-h4-line: 30px;
  --text-h4-tracking: -0.01em;
  --text-h4-weight: 500;

  --text-h5-size: 20px;
  --text-h5-line: 26px;
  --text-h5-tracking: -0.005em;
  --text-h5-weight: 500;

  --text-h6-size: 18px;
  --text-h6-line: 24px;
  --text-h6-tracking: -0.005em;
  --text-h6-weight: 500;

  --text-body-lg-size: 18px;
  --text-body-lg-line: 26px;
  --text-body-lg-tracking: 0;
  --text-body-lg-weight: 400;

  --text-body-size: 16px;
  --text-body-line: 24px;
  --text-body-tracking: 0;
  --text-body-weight: 400;

  --text-body-sm-size: 14px;
  --text-body-sm-line: 20px;
  --text-body-sm-tracking: 0;
  --text-body-sm-weight: 400;

  --text-label-lg-size: 16px;
  --text-label-lg-line: 20px;
  --text-label-lg-tracking: 0;
  --text-label-lg-weight: 500;

  --text-label-size: 14px;
  --text-label-line: 18px;
  --text-label-tracking: 0;
  --text-label-weight: 500;

  /* 13px floor starts here. Nothing below this size exists in the scale. */
  --text-label-sm-size: 13px;
  --text-label-sm-line: 18px;
  --text-label-sm-tracking: 0;
  --text-label-sm-weight: 500;

  --text-caption-size: 13px;
  --text-caption-line: 18px;
  --text-caption-tracking: 0;
  --text-caption-weight: 400;

  /* "Overline" is a small tracked label, NOT an all-caps style.
     Sentence case only. Do not add text-transform here. */
  --text-overline-size: 13px;
  --text-overline-line: 18px;
  --text-overline-tracking: 0.01em;
  --text-overline-weight: 600;

  /* ----------------------------------------------------------------------
     RADIUS
     ---------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
     ELEVATION. Cool-black tint rather than neutral grey, so shadows sit
     with the ink colour instead of muddying it.
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgb(10 13 20 / 0.06);
  --shadow-sm: 0 1px 3px 0 rgb(10 13 20 / 0.1), 0 1px 2px -1px rgb(10 13 20 / 0.08);
  --shadow-md: 0 4px 6px -1px rgb(10 13 20 / 0.1), 0 2px 4px -2px rgb(10 13 20 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(10 13 20 / 0.1), 0 4px 6px -4px rgb(10 13 20 / 0.08);
  --shadow-xl: 0 20px 25px -5px rgb(10 13 20 / 0.1), 0 8px 10px -6px rgb(10 13 20 / 0.08);
  --shadow-2xl: 0 25px 50px -12px rgb(10 13 20 / 0.24);

  /* Legibility shadow for white type sitting directly on an image with no
     plate behind it. Two layers: a tight one for edge definition, a wide
     soft one to darken whatever is behind. Tokenised so it is never a
     hardcoded colour at the call site. */
  --text-shadow-scrim: 0 1px 2px rgb(0 0 0 / 0.55), 0 2px 14px rgb(0 0 0 / 0.65);

  /* ----------------------------------------------------------------------
     IMAGERY.
     Two crops: 3:2 for story tiles, 4:5 for people. The scrim is the
     gradient every white-on-image caption sits on, defined once so the hero
     rail, the cards and the design system samples cannot drift apart. Lower
     half only, so the top of a composition stays as the client made it.
     ---------------------------------------------------------------------- */
  --aspect-tile: 3 / 2;
  --aspect-portrait: 4 / 5;
  --image-scrim: linear-gradient(
    to top,
    color-mix(in oklab, var(--color-neutral-1000) 85%, transparent),
    color-mix(in oklab, var(--color-neutral-1000) 45%, transparent) 50%,
    transparent
  );

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max: 72rem;
  --container-gutter: 1.5rem;
  --container-gutter-md: 2rem;
}

/* ==========================================================================
   Dark mode.
   Add class="dark" to <html>. Only the semantic tokens are remapped: the
   primitive ramps, the type scale, radius and elevation are mode-independent
   by design, so there is exactly one place to look when a colour is wrong.

   Note the site currently ships no dark mode toggle. The tokens are complete
   and correct, so adding one is a UI job, not a design system job.
   ========================================================================== */
.dark {
  --background: #121417;
  --background-subtle: #1f2327;
  --background-muted: #343a40;
  --surface: #1f2327;
  --surface-raised: #343a40;

  --foreground: #ffffff;
  --muted-foreground: #c4c9d0;
  --subtle-foreground: #6b7280;

  --border: #343a40;
  --border-subtle: #343a40;
  --border-strong: #4b5259;

  --brand: #0052f8;
  --brand-hover: #3b77ff;
  --brand-subtle: #001e5c;
  --brand-foreground: #ffffff;

  --success: #12b76a;
  --success-subtle: #027a48;
  --success-foreground: #12b76a;

  --warning: #f79009;
  --warning-subtle: #b54708;
  --warning-foreground: #f79009;

  --destructive: #f04438;
  --destructive-subtle: #b42318;
  --destructive-foreground: #f04438;

  --info: #0052f8;
  --info-subtle: #001e5c;
  --info-foreground: #6e9bff;

  --ring: #3b77ff;
}