/* ApplyPacket design tokens. Semantic roles only - components read these, never raw hex.
   Light is the default (:root). Dark applies under EITHER an OS preference with no explicit
   theme chosen, OR an explicit [data-theme="dark"] toggle - so a manual toggle always wins over
   the OS setting, in both directions. */

:root {
  /* --- color roles --- */
  --bg: #ffffff;              /* page background */
  --bg-elev: #f4f4f5;         /* raised surface: cards, panels, code blocks */
  --fg: #14171a;              /* primary text and icons */
  --fg-muted: #55595e;        /* secondary text: captions, help text, meta */
  --border: #e2e4e7;          /* hairlines: dividers, input borders, card edges */
  --accent: #1d4ed8;          /* the one brand accent: primary buttons, links, active state */
  --accent-fg: #ffffff;       /* text/icons placed on top of --accent */
  --accent-hover: #17409b;    /* --accent on hover/press */
  --focus: #1d4ed8;           /* keyboard focus ring color */
  --ok: #157f3c;              /* success state (rare: form confirmations) */
  --warn: #8a5b00;            /* caution state (rare: soft warnings) */
  --danger: #b42318;          /* error state: invalid fields, destructive actions */

  /* --- type scale (rem, 1rem = 16px browser default) --- */
  --fs-0: 0.8125rem;  /* 13px: fine print, help text, disclosures */
  --fs-1: 0.9375rem;  /* 15px: small body text */
  --fs-2: 1rem;       /* 16px: default body text */
  --fs-3: 1.25rem;    /* 20px: card titles, lead paragraph */
  --fs-4: 1.625rem;   /* 26px: section headings */
  --fs-5: 2.125rem;   /* 34px: page headings */
  --fs-6: 2.75rem;    /* 44px: hero heading only */

  /* --- spacing scale (rem, 8px rhythm) --- */
  --sp-1: 0.25rem;  /* 4px: tight inline gaps */
  --sp-2: 0.5rem;   /* 8px: icon-to-label gaps */
  --sp-3: 0.75rem;  /* 12px: form field internal padding */
  --sp-4: 1rem;     /* 16px: base gap between related elements */
  --sp-5: 1.5rem;   /* 24px: gap between cards in a grid */
  --sp-6: 2rem;     /* 32px: gap between a heading and its content */
  --sp-7: 3rem;     /* 48px: gap between stacked page sections (tight) */
  --sp-8: 5rem;     /* 80px: gap between stacked page sections (default) */

  /* --- shape and layout --- */
  --radius: 8px;        /* corner radius for cards, buttons, inputs */
  --measure: 68ch;      /* max width for a line of prose */
  --container: 1120px;  /* max width for a page's content container */
}

/* Dark: OS preference, only when no explicit theme is set on the document. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c0d;
    --bg-elev: #17181b;
    --fg: #f3f4f5;
    --fg-muted: #b0b3b8;
    --border: #2a2d31;
    --accent: #5b8def;
    --accent-fg: #06121f;
    --accent-hover: #7ea6f3;
    --focus: #5b8def;
    --ok: #3fb950;
    --warn: #d29922;
    --danger: #f85149;
  }
}

/* Dark: explicit toggle. Wins over the OS preference in both directions. */
:root[data-theme="dark"] {
  --bg: #0b0c0d;
  --bg-elev: #17181b;
  --fg: #f3f4f5;
  --fg-muted: #b0b3b8;
  --border: #2a2d31;
  --accent: #5b8def;
  --accent-fg: #06121f;
  --accent-hover: #7ea6f3;
  --focus: #5b8def;
  --ok: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
}