/* ============================================================
   tokens.css  ·  SINGLE SOURCE OF TRUTH for the design system
   ============================================================

   WHAT THIS FILE IS
   Every colour used anywhere on the site is named and defined
   here, once. A name like "--color-accent" is called a "token".
   Elsewhere in the CSS you never write a raw colour like #57B8E8;
   you write var(--color-accent), which means "use whatever
   --color-accent is set to." So changing the value here changes
   that colour on every page at the same time. That is the whole
   point of centralising: one edit, everywhere.

   THE TWO BLOCKS BELOW
   :root { ... }                 = the LIGHT-mode values (default)
   [data-theme="dark"] { ... }   = the DARK-mode values

   A small script on each page adds data-theme="dark" to the page
   when dark mode is on. When it is present, the dark values win
   and override the light ones. Same token names in both blocks,
   different values, so the whole site re-colours in one step.

   LOAD ORDER (matters!)
   Link this file FIRST on every page, before base.css. A token
   has to be defined before the CSS that uses it can read it.

   Extracted from sideline-app-v3.html (2026-07-19). Also mirrored
   to the "Portfolio Component Library" Claude Design project.

   NOTE ON TEXT SHADES
   The lighter text used by index / about / photo-gallery lives in
   site.css as a scoped override; the darker case-study values are
   the defaults below. See site.css for why it is split that way.
   ============================================================ */

/* Global reset: strip the browser's default margins/padding so
   spacing is only ever what we set. box-sizing: border-box makes
   width/height include padding + border (far more predictable).
   The transition here is what makes colours FADE, rather than
   snap, when you flip between light and dark mode. */
* { margin: 0; padding: 0; box-sizing: border-box; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

/* ============================================================
   DESIGN TOKENS — LIGHT MODE
   ============================================================ */
:root {
  /* Backgrounds */
  --color-bg-page:           #fcfcfc;
  --color-bg-nav:            #fcfcfc;
  --color-bg-sidebar:        #F4F8FB;
  --color-bg-card:           #fcfcfc;
  --color-bg-card-featured:  rgba(87, 184, 232, 0.06);
  --color-bg-callout:        rgba(87, 184, 232, 0.08);
  --color-bg-placeholder:    #F4F8FB;
  --color-bg-after:          rgba(87, 184, 232, 0.08);
  --color-bg-hover:          rgba(35, 39, 66, 0.02);
  --color-bg-toggle:         rgba(35, 39, 66, 0.05);

  /* Borders */
  --color-border-hairline:   rgba(35, 39, 66, 0.12);
  --color-border-card:       rgba(35, 39, 66, 0.12);
  --color-border-sidebar:    rgba(35, 39, 66, 0.08);
  --color-border-accent:     #57B8E8;
  --color-border-after:      rgba(87, 184, 232, 0.3);
  --color-border-toggle:     rgba(35, 39, 66, 0.12);

  /* Text */
  --color-text-primary:      #232742;
  --color-text-secondary:    rgba(35, 39, 66, 0.78);
  --color-text-tertiary:     rgba(35, 39, 66, 0.65);
  --color-text-muted:        rgba(35, 39, 66, 0.55);
  --color-text-faint:        rgba(35, 39, 66, 0.45);
  --color-text-placeholder:  rgba(35, 39, 66, 0.5);
  --color-text-nav:          rgba(35, 39, 66, 0.55);

  /* Accent */
  --color-accent:            #57B8E8;

  /* Secondary accents (problem stat top-borders) */
  --color-accent-pink:       #E479B2;
  --color-accent-yellow:     #E9D17D;
  --color-accent-purple:     #C099E8;
  --color-accent-green:      #A7EFB2;
  --color-accent-teal:       #4ECDC4;

  /* Timeline */
  --color-timeline-dot-bg:   #fcfcfc;
  --color-timeline-track:    rgba(35, 39, 66, 0.12);
}

/* ============================================================
   DESIGN TOKENS — DARK MODE
   ============================================================ */
[data-theme="dark"] {
  /* Backgrounds */
  --color-bg-page:           #14172A;
  --color-bg-nav:            #14172A;
  --color-bg-sidebar:        #0F1226;
  --color-bg-card:           rgba(252, 252, 252, 0.03);
  --color-bg-card-featured:  rgba(87, 184, 232, 0.10);
  --color-bg-callout:        rgba(87, 184, 232, 0.10);
  --color-bg-placeholder:    rgba(252, 252, 252, 0.03);
  --color-bg-after:          rgba(87, 184, 232, 0.10);
  --color-bg-hover:          rgba(252, 252, 252, 0.02);
  --color-bg-toggle:         rgba(252, 252, 252, 0.05);

  /* Borders */
  --color-border-hairline:   rgba(252, 252, 252, 0.12);
  --color-border-card:       rgba(252, 252, 252, 0.10);
  --color-border-sidebar:    rgba(252, 252, 252, 0.06);
  --color-border-accent:     rgba(87, 184, 232, 0.50);
  --color-border-after:      rgba(87, 184, 232, 0.40);
  --color-border-toggle:     rgba(252, 252, 252, 0.12);

  /* Text */
  --color-text-primary:      #fcfcfc;
  --color-text-secondary:    rgba(252, 252, 252, 0.72);
  --color-text-tertiary:     rgba(252, 252, 252, 0.65);
  --color-text-muted:        rgba(252, 252, 252, 0.45);
  --color-text-faint:        rgba(252, 252, 252, 0.40);
  --color-text-placeholder:  rgba(252, 252, 252, 0.40);
  --color-text-nav:          rgba(252, 252, 252, 0.50);

  /* Accent — unchanged */
  --color-accent:            #57B8E8;

  /* Secondary accents — desaturated for dark bg */
  --color-accent-pink:       #C46A93;
  --color-accent-yellow:     #C9B26A;
  --color-accent-purple:     #A485C9;
  --color-accent-green:      #7EC98A;
  --color-accent-teal:       #4ECDC4;

  /* Timeline */
  --color-timeline-dot-bg:   #14172A;
  --color-timeline-track:    rgba(252, 252, 252, 0.10);
}