/**
 * @file theme.css
 * NS Digital brand palette for Byte Theme — light.
 *
 * Overrides web/themes/contrib/byte_theme/src/theme.css. Byte Theme picks this
 * file up automatically because it sits in the Drupal root next to index.php
 * (see byte_theme's src/Hook/ThemeHooks.php). No Tailwind rebuild is needed:
 * every value here is a CSS custom property the compiled CSS reads at runtime.
 *
 * Brand colours carried over from the Drupal 7 theme
 * (web_d7/sites/all/themes/md_alpine/scss/_variables.scss):
 *
 *   #7b5fa6  primary purple
 *   #8569b0  primary light
 *   #6b4f96  the deeper purple in the logo
 *   #2e3034  dark neutral
 *   #7c7c7c  muted text  — darkened here, see note below
 *
 * Contrast, measured rather than assumed (WCAG 2.1 AA, normal text needs 4.5):
 *
 *   white on #7b5fa6 ........ 5.21  buttons, primary fills
 *   #2e3034 on white ....... 13.22  body copy
 *   #7b5fa6 on white ........ 5.21  links, accents on the page ground
 *   #6b6b6b on white ........ 5.33  muted copy
 *
 * The original #7c7c7c muted grey only reaches 4.17 on white and 3.93 on the
 * card grey, so it is darkened to #6b6b6b here. It is the one brand value that
 * did not survive the move to a light background unchanged.
 */

/**
 * THE PALETTE — ground truth. Nothing may reassign these.
 *
 * Two layers of colour live in this build, and the distinction is the whole
 * point of this block:
 *
 *   - `--nsd-*` below are *the colours themselves*. They mean the same thing
 *     everywhere on the site, in every context, forever.
 *   - Byte's tokens (`--foreground`, `--primary`, `--border`, …) are *roles*.
 *     They are deliberately reassigned per subtree — the header, the footer, a
 *     dark band and the overlapping hero all re-point them so that anything
 *     dropped inside inverts without knowing where it is.
 *
 * That reassignment is why the palette layer has to exist. Inside an inverted
 * subtree, `var(--foreground)` no longer means "the body ink" — it has already
 * been overridden further up the cascade — so a rule that needs the light-ground
 * value back has no token to ask for it, and used to restate the raw `oklch()`
 * instead. Those literals were repeated eight times across five files, and a
 * preprocessor variable could not have fixed it: the problem is a runtime
 * cascade override, and a Sass variable is gone before the browser sees it.
 *
 * So: never write `--nsd-ink: …` anywhere but here. Assign roles *from* the
 * palette (`--foreground: var(--nsd-ink)`), and the value survives any depth of
 * inversion.
 */
:root {
  /* Neutrals. Ink is the D7 theme's darkest brand neutral, #2e3034. */
  --nsd-ink: oklch(0.3088 0.007689 264.5);
  --nsd-ink-raised: oklch(0.3708 0.008 264.5); /* a surface lifted off ink */
  --nsd-paper: oklch(1 0 302);
  --nsd-quiet: oklch(0.5278 0 302); /* #6b6b6b — muted copy on light */
  --nsd-quiet-on-dark: oklch(0.85 0 302);
  --nsd-rule: oklch(0.9219 0 302); /* borders and inputs on light */

  /* Brand purples, light to dark. */
  --nsd-brand-tint: oklch(0.9501 0.01555 306.4); /* pale lavender surface */
  --nsd-brand-light: oklch(0.6863 0.09594 301.9); /* #a58ccc — on dark grounds */
  --nsd-brand: oklch(0.5438 0.1113 301); /* #7b5fa6 — the primary */
  --nsd-brand-logo: oklch(0.4891 0.1134 300.5); /* #6b4f96 */
  --nsd-brand-deep: oklch(0.3842 0.07042 301.1);
}

:root {
  /* Page and surfaces */
  --background: var(--nsd-paper);
  --foreground: var(--nsd-ink);
  --card: oklch(0.9791 0 302);
  --card-foreground: var(--foreground);

  /* Brand */
  --primary: var(--nsd-brand);
  --primary-foreground: var(--nsd-paper);

  /* Secondary actions — tinted rather than white, so they read on a white page */
  --secondary: var(--nsd-brand-tint);
  --secondary-foreground: var(--nsd-brand-deep);

  /* Quiet copy and quiet surfaces */
  --muted: oklch(0.9642 0 302);
  --muted-foreground: var(--nsd-quiet);

  /* Accent surfaces — the same purple tint, for highlighted blocks */
  --accent: var(--nsd-brand-tint);
  --accent-foreground: var(--nsd-brand-deep);

  --destructive: oklch(0.5433 0.174 29.7);
  --destructive-foreground: var(--nsd-paper);

  --border: var(--nsd-rule);
  --input: var(--nsd-rule);

  /* Type — the D7 brand faces (scss/_variables.scss: $font-title, $font-body).
     Body text is a system stack, same as D7: no font file, no request, just a
     fallback chain. Headings are Raleway, self-hosted via fonts.css — see that
     file's header for where it came from and why self-hosted rather than
     linked. Byte's own Roboto is dropped rather than kept as a fallback: it
     was Byte's demo default, not a brand face, and nothing on the site asks
     for it once --font-sans no longer names it. */
  --font-sans: "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-heading: "Raleway", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* 0, not Byte's 0.5rem default: D7 (Bootstrap-based) had square buttons,
     square nav, square cards throughout — nothing rounded. This one token
     drives every rounded-sm/md/lg/xl utility sitewide (main.css:29-32), so
     it's the single point of control rather than chasing individual
     `rounded-*` classes through each component. */
  --radius: 0rem;

  /* Shadows: lighter than Byte's defaults. On a dark ground a shadow is barely
     visible and can be heavy; on white it does real work and must be subtle. */
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.08;
  --shadow-color: var(--nsd-ink);
  --shadow-2xs: 0 1px 2px 0px hsl(225 6% 19% / 0.04);
  --shadow-xs: 0 1px 2px 0px hsl(225 6% 19% / 0.05);
  --shadow-sm: 0 1px 2px 0px hsl(225 6% 19% / 0.06), 0 1px 2px -1px hsl(225 6% 19% / 0.06);
  --shadow: 0 1px 3px 0px hsl(225 6% 19% / 0.07), 0 1px 2px -1px hsl(225 6% 19% / 0.06);
  --shadow-md: 0 2px 4px 0px hsl(225 6% 19% / 0.07), 0 2px 4px -1px hsl(225 6% 19% / 0.06);
  --shadow-lg: 0 4px 8px 0px hsl(225 6% 19% / 0.08), 0 4px 6px -1px hsl(225 6% 19% / 0.06);
  --shadow-xl: 0 8px 16px 0px hsl(225 6% 19% / 0.09), 0 8px 10px -1px hsl(225 6% 19% / 0.06);
  --shadow-2xl: 0 12px 32px 0px hsl(225 6% 19% / 0.16);

  /* Set navbar height for hero billboard overlay — carried over unchanged. */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}