/* =============================================================================
 * tokens.css
 * Design tokens for company31.com.
 *
 * Two colour modes: the :root block defines the light-mode palette, and the
 * @media (prefers-color-scheme: dark) block overrides the surface, text, rule,
 * and accent tokens for dark mode. Legacy aliases at the bottom of the :root
 * block let existing CSS keep using --c31-paper / --c31-navy / --c31-ink etc.
 * Those aliases point at the semantic tokens, so they flip with the mode.
 *
 * Rules that need to stay "always dark" (inverted sections like the hero,
 * dark CTAs, and the footer) use --c31-invert-bg and --c31-invert-fg, which
 * are defined for both modes.
 * ========================================================================== */

:root {
  color-scheme: light dark;

  /* Semantic surfaces and text (light mode defaults) --------------------- */
  --c31-bg:           #FBFAF7;
  --c31-bg-alt:       #EEF3F9;
  --c31-fg:           #0F1B2D;
  --c31-fg-soft:      #43556E;
  --c31-heading:      #071A33;
  --c31-rule:         #CCD6E2;

  /* Always-dark inverted surface (hero, .section--dark, footer, skip link) */
  --c31-invert-bg:    #071A33;
  --c31-invert-fg:    #F4F8FC;

  /* Brand accent (deep corporate blue, broad-technology register) --------- */
  --c31-accent:       #0B57A4;
  --c31-accent-hover: #084482;
  --c31-on-accent:    #FFFFFF;

  /* Focus ring (independent of brand accent for keyboard visibility) ------ */
  --c31-focus:        #2563EB;

  /* Legacy aliases — kept so existing rules need no rewrite ------------- */
  --c31-paper:        var(--c31-bg);
  --c31-paper-alt:    var(--c31-bg-alt);
  --c31-ink:          var(--c31-fg);
  --c31-ink-soft:     var(--c31-fg-soft);
  --c31-navy:         var(--c31-heading);

  /* Typography ----------------------------------------------------------- */
  --ff-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ff-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-body:    0.9375rem;
  --fs-lede:    1.125rem;
  --fs-h3:      1.25rem;
  --fs-h2:      1.75rem;
  --fs-h1:      clamp(2.25rem, 2rem + 2vw, 3.5rem);
  --lh-body:    1.65;
  --lh-heading: 1.15;
  --tracking-display: -0.01em;

  /* Spacing scale (rem) -------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout --------------------------------------------------------------- */
  --measure-wide:   76rem;
  --measure-reading:40rem;
  --radius-1:       2px;
  --shadow-1:       0 1px 2px rgba(11, 18, 32, 0.06), 0 8px 24px rgba(11, 18, 32, 0.05);
  --rule-weight:    1px;

  /* Motion --------------------------------------------------------------- */
  --ease-1:  cubic-bezier(0.2, 0, 0, 1);
  --dur-1:   160ms;
  --dur-2:   260ms;
}

/* Dark mode ------------------------------------------------------------- */
/* Only the surface, text, rule, invert, accent, and focus tokens change.
 * Typography, spacing, and motion are shared between modes. The legacy
 * aliases defined in :root (paper, paper-alt, ink, ink-soft, navy) do not
 * need to be redeclared — they reference the semantic tokens via var() and
 * inherit the new values automatically. */

@media (prefers-color-scheme: dark) {
  :root {
    /* Three-level tonal stack: page bg < alt section < invert section.
     * Cool deep navy base so dark mode reads as engineered, not warm. */
    --c31-bg:           #060B17;
    --c31-bg-alt:       #0C1729;
    --c31-fg:           #E6EEF9;
    --c31-fg-soft:      #8FA3BD;
    --c31-heading:      #F1F6FC;
    --c31-rule:         #1C2A40;

    --c31-invert-bg:    #0C1B33;
    --c31-invert-fg:    #E6EEF9;

    --c31-accent:       #5FA8FF;
    --c31-accent-hover: #83BCFF;
    --c31-on-accent:    #041223;

    --c31-focus:        #9FC4FF;

    --shadow-1:         0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}