/*
  Design tokens — gary.design
  COOL palette (deliberate divergence from bacon.works' warm scheme — Gary wants the
  portfolio to have its own cooler identity). Source palette:
    08415C deep teal-blue · CC2936 crimson · EBBAB9 rose · 388697 teal · B5FFE1 mint

  Mapping notes (accessibility drove these):
    - 08415C → primary text (very high contrast).
    - The mid-tone teal 388697 FAILS AA as text on light, so links/buttons use a
      slightly deepened teal (--accent); 388697 lives on as --accent-bright for
      decorative, non-text use.
    - CC2936 crimson → emphasis accent (--accent-2), passes AA as text both ways.
    - Mint + rose → soft decorative details.

  We use CSS light-dark() so both themes live in ONE declaration. color-scheme drives it:
    no [data-theme] → follows OS · [data-theme="light"|"dark"] → forced.
*/

:root {
  color-scheme: light dark;

  /* Surfaces — cool, clean */
  --bg:           light-dark(#f0f6f5, #071f2b);
  --surface:      light-dark(#ffffff, #0c2c3a);
  --surface-alt:  light-dark(#e3f1ee, #123644);
  --border:       light-dark(#cfe2de, #1e4a58);

  /* Text */
  --text:         light-dark(#08415c, #e9f4f2);
  --text-soft:    light-dark(#35606c, #a7c4ca);
  --text-faint:   light-dark(#5f818a, #7398a0);

  /* Primary accent — teal (deepened on light for AA text contrast, lifted on dark) */
  --accent:        light-dark(#10697f, #57b6c7);
  --accent-hover:  light-dark(#0b5468, #74c8d8);
  --accent-soft:   light-dark(#d5ebf0, #10323d);
  --accent-bright: light-dark(#388697, #57b6c7);   /* palette teal — decorative, non-text */
  --on-accent:     light-dark(#ffffff, #052029);   /* text ON a filled accent surface */

  /* Emphasis accent — crimson (use sparingly: key CTAs, highlights, metrics) */
  --accent-2:       light-dark(#cc2936, #f2545f);
  --accent-2-hover: light-dark(#b0212c, #ff6b74);
  --accent-2-soft:  light-dark(#f7dbdc, #3a151a);

  /* Palette details */
  --mint: #b5ffe1;
  --rose: #ebbab9;

  /* Form */
  --radius:    18px;
  --radius-sm: 10px;
  --shadow:
    0 1px 2px  light-dark(rgba(8,45,60,.06), rgba(0,0,0,.35)),
    0 14px 36px light-dark(rgba(8,55,80,.10), rgba(0,0,0,.50));
  --maxw:      940px;
  --maxw-wide: 1100px;

  /* Focus ring — visible, on-brand, meets the a11y bar */
  --ring: 0 0 0 3px light-dark(rgba(16,105,127,.45), rgba(87,182,199,.55));

  /* Type */
  --font-display: "Space Grotesk Variable", system-ui, sans-serif;   /* 700 only, no italic */
  --font-body:    "Atkinson Hyperlegible Next Variable", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (clamp: min at ~360px, max at ~1100px) */
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.28vw, 1.13rem);   /* body, ≥16px floor */
  --step-1:  clamp(1.20rem, 1.10rem + 0.48vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.24vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.69rem + 1.90vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.93rem + 2.80vw, 4.73rem);

  /* Spacing rhythm */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;
}

/* Explicit user overrides (set by the theme toggle) */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }