/* =============================================================================
   Alex Bores Bills, Design Tokens
   -----------------------------------------------------------------------------
   The single source of truth for the visual system. Everything else (components,
   pages, Squarespace code injection) consumes these custom properties.

   Aesthetic: clean, minimalist, text-forward, monochrome with restrained warmth.
   Derived from parvmahajan.com (typographic blog) and parvmahajan.com/petri
   (data dashboard). Contrast comes from weight and whitespace, not color.
   ============================================================================= */

:root {
  /* ---- Brand / accent --------------------------------------------------------
     One restrained accent (deep legislative green, from petri's palette).
     Used sparingly: the "enacted" status, focus rings, the wordmark rule.
     The default interactive color is ink (near-black), as on both source sites. */
  --accent:        #0f3f30;   /* deep forest green */
  --accent-soft:   #1c5742;
  --accent-tint:   #eef3f0;   /* faint green wash for backgrounds */

  /* ---- Ink scale (text) ------------------------------------------------------ */
  --ink:           #1a1a1a;   /* primary text, headings (near-black) */
  --ink-body:      #333333;   /* long-form body copy */
  --ink-soft:      #4a4a4a;   /* secondary text */
  --ink-muted:     #666666;   /* meta, captions (AA on white) */
  --ink-faint:     #8a8a8a;   /* micro-labels, decorative, large only */

  /* ---- Surfaces -------------------------------------------------------------- */
  --bg:            #ffffff;   /* page background */
  --surface:       #ffffff;   /* cards */
  --surface-warm:  #faf9f6;   /* subtle warm panel */
  --hover:         #f6f5f1;   /* warm hover wash (from petri) */
  --code-bg:       #f5f5f5;   /* inline code / pre */

  /* ---- Lines ----------------------------------------------------------------- */
  --rule:          #e6e6e6;   /* default hairline borders, dividers */
  --rule-strong:   #cfcfcf;   /* control outlines, emphasized borders */

  /* ---- Status palette (bill stages) -----------------------------------------
     Muted, desaturated hues. Used as a small dot + optional tint, never as a
     loud fill, to preserve the restrained look. */
  --st-enacted:        #0f3f30;   --st-enacted-tint:   #eef3f0;
  --st-passed:         #34536f;   --st-passed-tint:    #eef1f5;
  --st-progress:       #8a6d3b;   --st-progress-tint:  #f6f1e8;
  --st-committee:      #6a6a6a;   --st-committee-tint: #f2f2f2;
  --st-stricken:       #8a3b3b;   --st-stricken-tint:  #f6eded;

  /* ---- Typography ------------------------------------------------------------ */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* OpenType: stylistic set + tabular figures so numbers align in tables */
  --font-features: "tnum" 1, "ss01" 1;

  --fw-light:    300;   /* body, links (blog default) */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;   /* UI labels, card titles (dashboard) */
  --fw-bold:     700;   /* headings */

  /* Modular type scale (rem). Display sizes from the blog, UI sizes from petri. */
  --fs-display: 3rem;       /* h1 hero            48px */
  --fs-h1:      2.125rem;   /* page title         34px */
  --fs-h2:      1.5rem;     /* section            24px */
  --fs-h3:      1.25rem;    /* sub-section        20px */
  --fs-lg:      1.125rem;   /* lead paragraph     18px */
  --fs-body:    1rem;       /* body               16px */
  --fs-sm:      0.9375rem;  /* dense text         15px */
  --fs-meta:    0.875rem;   /* meta, captions     14px */
  --fs-xs:      0.8125rem;  /* chips, controls    13px */
  --fs-micro:   0.6875rem;  /* uppercase labels   11px */

  --lh-tight:   1.25;       /* headings */
  --lh-snug:    1.4;        /* UI, sub-headings */
  --lh-body:    1.6;        /* default */
  --lh-prose:   1.7;        /* long reading column */

  --tracking-tight:  -0.02em;  /* large headings */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;  /* small links */
  --tracking-label:   0.12em;  /* uppercase micro-labels */

  /* ---- Spacing scale (rem) --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* ---- Layout widths --------------------------------------------------------- */
  --measure-prose: 640px;    /* reading column (blog post) */
  --measure-wide:  1280px;   /* dashboard / list container */
  --measure-max:   1400px;   /* outer site max */
  --gutter:        clamp(1rem, 4vw, 4rem);

  /* ---- Radii ----------------------------------------------------------------- */
  --radius-code: 3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* ---- Elevation (used very sparingly) --------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.08);

  /* ---- Motion ---------------------------------------------------------------- */
  --t-fast:  120ms ease;     /* control state changes (dashboard) */
  --t-med:   0.3s ease;      /* link underline appearing */
  --t-slow:  0.8s ease;      /* link underline receding (blog's signature) */

  /* ---- Focus ----------------------------------------------------------------- */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* ---- Breakpoints (reference; use in @media manually) ----------------------- */
  --bp-sm: 700px;
  --bp-md: 960px;
}

/* =============================================================================
   Dark theme, toggled via [data-theme="dark"] (explicit) and honored for
   system preference when the user hasn't chosen. Mirrors the blog's dark set.
   ============================================================================= */
[data-theme="dark"] {
  --accent:        #5fae93;
  --accent-soft:   #7cc3aa;
  --accent-tint:   #16241f;

  --ink:           #f0f0f0;
  --ink-body:      #c8c8c8;
  --ink-soft:      #b0b0b0;
  --ink-muted:     #999999;
  --ink-faint:     #777777;

  --bg:            #1a1a1a;
  --surface:       #1f1f1f;
  --surface-warm:  #20201e;
  --hover:         #2a2a2a;
  --code-bg:       #2a2a2a;

  --rule:          #333333;
  --rule-strong:   #454545;

  --st-enacted:    #5fae93;  --st-enacted-tint:   #18241f;
  --st-passed:     #7d9ec0;  --st-passed-tint:    #1a2230;
  --st-progress:   #c2a268;  --st-progress-tint:  #2a2418;
  --st-committee:  #9a9a9a;  --st-committee-tint: #262626;
  --st-stricken:   #c98686;  --st-stricken-tint:  #2a1d1d;

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:        #5fae93;
    --accent-soft:   #7cc3aa;
    --accent-tint:   #16241f;

    --ink:           #f0f0f0;
    --ink-body:      #c8c8c8;
    --ink-soft:      #b0b0b0;
    --ink-muted:     #999999;
    --ink-faint:     #777777;

    --bg:            #1a1a1a;
    --surface:       #1f1f1f;
    --surface-warm:  #20201e;
    --hover:         #2a2a2a;
    --code-bg:       #2a2a2a;

    --rule:          #333333;
    --rule-strong:   #454545;

    --st-enacted:    #5fae93;  --st-enacted-tint:   #18241f;
    --st-passed:     #7d9ec0;  --st-passed-tint:    #1a2230;
    --st-progress:   #c2a268;  --st-progress-tint:  #2a2418;
    --st-committee:  #9a9a9a;  --st-committee-tint: #262626;
    --st-stricken:   #c98686;  --st-stricken-tint:  #2a1d1d;
  }
}

/* Respect reduced-motion: collapse the blog's slow underline transitions. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med:  0ms;
    --t-slow: 0ms;
  }
}