/*
  Lake America News, final design tokens (merged spec)
  Base: candidate news-1 (utility dashboard direction), corrected.
  Corrections vs the candidate file:
  - Added --link alias so components stop hard-coding accent-strong.
  - Added --measure (comfortable reading column) for the article sections
    grafted from candidate news-3.
  - Documented that the dark palette appears twice on purpose (guarded
    media query + explicit toggle override); edit both blocks together.
  System font stacks only. No webfonts. This page must stay fast.
*/

:root {
  /* ---------- Color: light (default) ---------- */
  --bg: #f2f5f7;
  --bg-inset: #e8edf1;
  --surface: #ffffff;
  --surface-alt: #eef2f5;
  --border: #d6dee4;
  --border-strong: #b9c5cd;

  --text: #101c24;
  --text-muted: #4b5b66;
  --text-faint: #566570; /* WCAG AA: ~6:1 vs --surface (#fff) and --bg (#f2f5f7) */
  --text-on-accent: #f5fafd;

  --accent: #0c6a9b;
  --accent-strong: #084a6d;
  --accent-soft: #e2f0f7;
  --accent-soft-border: #b8dcec;

  --link: var(--accent-strong);

  --data: #084a6d;         /* readout numerals */
  --data-dim: #6f8794;     /* placeholder / awaiting-data numerals */

  --good: #1c7a4c;
  --good-soft: #e2f4e9;
  --good-soft-border: #b7e2c6;

  --warn: #a5490f;
  --warn-soft: #fbe9de;
  --warn-soft-border: #f0c19f;

  --pending: #7a5a0a;
  --pending-soft: #faf0d8;
  --pending-soft-border: #e8cf8f;

  --live-dot: #1c9a5b;

  --shadow-1: 0 1px 2px rgba(16, 28, 36, 0.06);
  --shadow-2: 0 4px 16px rgba(16, 28, 36, 0.10);

  /* ---------- Type ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace;

  --text-2xs: 0.6875rem;   /* 11px, micro labels, source tags */
  --text-xs: 0.75rem;      /* 12px, eyebrow, pills */
  --text-sm: 0.8125rem;    /* 13px, nav, meta */
  --text-base: 0.9375rem;  /* 15px, body */
  --text-md: 1.0625rem;    /* 17px, lead paragraph */
  --text-lg: 1.25rem;      /* 20px, card headings */
  --text-xl: 1.625rem;     /* 26px, section headings */
  --text-2xl: 2.125rem;    /* 34px, hero h1, small viewport */
  --text-3xl: 2.75rem;     /* 44px, hero h1, wide viewport */
  --text-data-md: 1.5rem;  /* 24px, stat card readout */
  --text-data-lg: 1.875rem;/* 30px, hero readouts if used */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;  /* article body paragraphs */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 2rem;      /* 32 */
  --space-8: 2.5rem;    /* 40 */
  --space-9: 3.5rem;    /* 56 */
  --space-10: 4.5rem;   /* 72 */

  /* ---------- Layout ---------- */
  --content-width: 1180px;
  --measure: 42rem;        /* single-column reading width for article prose */
  --nav-height: 52px;
  --ticker-height: 30px;

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-w: 1px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
}

/* ---------- Color: dark ----------
   The dark palette is declared twice ON PURPOSE:
   1. Under prefers-color-scheme dark, guarded with :not([data-theme="light"])
      so a manual light choice beats a dark OS.
   2. Under :root[data-theme="dark"] so a manual dark choice beats a light OS.
   The two blocks must stay identical. Edit both together. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1216;
    --bg-inset: #0e181d;
    --surface: #101c22;
    --surface-alt: #15242b;
    --border: #263640;
    --border-strong: #354852;

    --text: #e7eef1;
    --text-muted: #a3b3bc;
    --text-faint: #8a99a3; /* WCAG AA: ~5.9:1 vs --surface (#101c22) and darker */
    --text-on-accent: #06141a;

    --accent: #55b8e6;
    --accent-strong: #8ad0f0;
    --accent-soft: #132a34;
    --accent-soft-border: #24475a;

    --data: #8ad0f0;
    --data-dim: #4f6670;

    --good: #4fcf8c;
    --good-soft: #113023;
    --good-soft-border: #1f5c40;

    --warn: #e8905b;
    --warn-soft: #33200f;
    --warn-soft-border: #6b4322;

    --pending: #e4c467;
    --pending-soft: #322a10;
    --pending-soft-border: #665323;

    --live-dot: #4fcf8c;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #0a1216;
  --bg-inset: #0e181d;
  --surface: #101c22;
  --surface-alt: #15242b;
  --border: #263640;
  --border-strong: #354852;

  --text: #e7eef1;
  --text-muted: #a3b3bc;
  --text-faint: #8a99a3;
  --text-on-accent: #06141a;

  --accent: #55b8e6;
  --accent-strong: #8ad0f0;
  --accent-soft: #132a34;
  --accent-soft-border: #24475a;

  --data: #8ad0f0;
  --data-dim: #4f6670;

  --good: #4fcf8c;
  --good-soft: #113023;
  --good-soft-border: #1f5c40;

  --warn: #e8905b;
  --warn-soft: #33200f;
  --warn-soft-border: #6b4322;

  --pending: #e4c467;
  --pending-soft: #322a10;
  --pending-soft-border: #665323;

  --live-dot: #4fcf8c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
}