/*
  Design tokens.

  Each token below is a literal value that already existed somewhere in the
  CSS before this refactor — this file just gives each one a name so it has
  a single source of truth. Distinct shades (e.g. #555 vs #666) are kept as
  distinct tokens rather than merged, so no computed color changes anywhere.

  Alpha variants (borders/shadows/tints) are built from the *-rgb tokens via
  rgba(var(--x-rgb), <alpha>) so the opacity chosen at each call site stays
  visible and exact, instead of hiding it behind a dozen near-duplicate
  fixed-alpha tokens.
*/

:root {
  /* Brand */
  --color-brand: #C8503C;
  --color-brand-rgb: 200, 80, 60;
  --color-brand-hover: #b8452f;
  /*
    Text and icons sitting *on* a brand fill. Split out from plain white
    because the two stop agreeing in dark mode: the fill lightens there, so
    what sits on it has to darken. Every button, pill and hover fill reads
    this instead of naming a color directly.
  */
  --color-on-brand: #fff;

  /*
    Semantic surfaces. These were literal `--color-white` before, which was
    fine until a theme needed a surface that isn't white — the name then
    describes the value instead of the job, and a dark theme has to override
    every component that used it rather than the one token underneath.

    `--color-white` still exists below and still means white: it's used for
    the bright top edge on translucent materials, which stays a light tint in
    both themes because it represents light catching an edge.
  */
  --color-page: #fff;
  --color-surface: #fff;
  --color-surface-rgb: 255, 255, 255;
  /* The strongest text weight, for hover states that go past --color-heading. */
  --color-text-strong: #000;

  /*
    Hairlines — 1px rules drawn as a tint of the foreground (chip borders, the
    nav's lower edge, section dividers). Distinct from --color-black-rgb, which
    stays black in both themes because it draws *shadows*: a shadow is an
    absence of light, so it doesn't invert when the theme does. A hairline is
    ink, so it does.
  */
  --color-hairline-rgb: 0, 0, 0;
  --divider-alpha: 0.6;

  /* Light-mode neutrals. --color-white survives as a literal because the
     bright edge on translucent chrome genuinely stays white in both themes:
     it represents light catching an edge. --color-black-rgb is shadows only. */
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --color-heading: #1a1a1a;
  --color-body: #333;
  --color-text-secondary: #555;
  --color-text-muted: #666;
  --color-text-faint: #999;
  --color-text-faint-2: #aaa;
  --color-border: #e0e0e0;
  --color-border-strong: #c8c8c8;
  --color-surface-hover: #f0f0f0;
  --color-project-image-bg: #f4f3f1;

  /*
    The disc behind the timeline's company logos. Its own token rather than
    plain --color-surface because the logo artwork is opaque PNG with a ground
    baked into it, so the disc has to match that ground exactly or the image
    reads as a square sitting on a circle. Dark mode re-points it; see the note
    in css/themes/dark.css.
  */
  --color-timeline-logo-bg: var(--color-surface);

  /* Dark-mode values live in css/themes/dark.css, as overrides of the
     semantic tokens above rather than a parallel set of names. */

  /*
    Hero ambient glow. Each orb derives its own alpha from this base, and does
    so *on the orb element* rather than via an alias declared here — a `var()`
    resolved at :root computes against the light value and inherits down as a
    fixed number, so the dark-mode override (which lands on `body`) would
    never reach it.
  */
  /* Peak alpha at the orb's centre. Terracotta at 0.14 over white blends to
     #F7E6E4 — effectively invisible; 0.34 lands on #ECC4BD, a warm blush that
     reads as light without becoming a shape. */
  --hero-glow-alpha-base: 0.34;
  /* Amber rather than the blush this started as: a pale tint over white is
     barely distinguishable from white, so the second orb contributed nothing.
     Warmer and more saturated gives it a hue of its own against the
     terracotta of the first, which is what makes the two read as depth. */
  --color-glow-secondary-rgb: 222, 145, 80;

  /* Semantic */
  --color-error: #d6473f;
  --color-error-rgb: 214, 71, 63;
  --color-success: #2f8f4e;

  /* Footer (deliberately dark surface in both themes) */
  /* Themed in css/themes/dark.css like any other token, rather than via a
     second `-dark-mode` name plus a component override. */
  --color-footer-bg: #181410;
  --color-footer-cream: #FFF7ED;
  --color-footer-cream-rgb: 255, 247, 237;
  --color-footer-muted: #a39a90;
  --color-footer-copyright: #7d7469;
  --color-footer-pill-text: #e8a897;

  /*
    Theme toggle.

    The thumb slides across the track and parks over one of the two glyphs —
    the sun in light mode, the moon in dark. So each glyph is coloured for the
    surface it actually sits on in that theme, which is *not* the same surface
    in both. Colouring them against the track (as this once did) left whichever
    one the thumb covered at ~1.1:1 — invisible.

      light: sun sits on the white thumb, moon sits on the yellow track
      dark:  moon sits on the cream thumb, sun sits on the dark track

    The opacities encode which side is currently active, and swap with the
    theme for the same reason.
  */
  --color-toggle-track: #f3d767;
  --color-toggle-thumb: #ffffff;
  /* on the white thumb - 4.5:1 */
  --color-toggle-sun: #B4610A;
  /* on the yellow track, at 0.75 - 4.1:1 */
  --color-toggle-moon: #4A3C12;
  --toggle-sun-opacity: 1;
  --toggle-moon-opacity: 0.75;
  --color-toggle-envelope-bg: #fff9f7;

  /* Radius scale */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;
}