/* One token layer for all five packs.

   The originals carried five incompatible token sets — 24, 13, 16, 18 and 29 custom
   properties, one dark-first and four light-first, with --accent vs --acc and --card
   vs --panel vs --panel2 all meaning the same thing. None of those names survive.
   The chrome here is neutral and shared; a pack contributes exactly one thing, its
   accent, set on the root as --accent when a pack view opens.

   Theme is explicit: light / dark / follow system, persisted. The [data-theme]
   attribute always wins over the media query, in both directions. */

:root {
  color-scheme: light dark;

  /* neutral chrome — light */
  --bg: #f4f6f8;
  --bg-sunken: #e9edf1;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --line: #d9e0e7;
  --line-soft: #e7ecf1;
  --ink: #16202b;
  --ink-2: #48586a;
  --ink-3: #6f8093;

  /* semantic */
  --ok: #1a7f4b;
  --ok-soft: #e4f4ea;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;
  --warn: #8a5a00;
  --warn-soft: #fdf3dc;
  --focus: #1173b4;

  /* the pack's single contribution; replaced at runtime */
  --accent: #0d6e7a;
  --accent-soft: #dceef1;
  --on-accent: #ffffff;

  /* type */
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --s-2: 0.72rem;
  --s-1: 0.83rem;
  --s0: 1rem;
  --s1: 1.15rem;
  --s2: 1.4rem;
  --s3: 1.85rem;

  /* metrics */
  --radius: 12px;
  --radius-sm: 8px;
  --tap: 44px;            /* the floor for anything a thumb has to hit */
  --gap: 12px;
  --shell: 880px;
  --shadow: 0 1px 2px rgba(16, 32, 48, .06), 0 4px 14px rgba(16, 32, 48, .05);

  /* chrome insets, safe-area aware */
  --pad-top: max(12px, env(safe-area-inset-top));
  --pad-bottom: max(12px, env(safe-area-inset-bottom));
  --pad-left: max(14px, env(safe-area-inset-left));
  --pad-right: max(14px, env(safe-area-inset-right));
  --tabbar: 0px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f151c;
    --bg-sunken: #0a0f14;
    --panel: #182029;
    --panel-2: #1e2831;
    --line: #2b3742;
    --line-soft: #222c36;
    --ink: #e6edf4;
    --ink-2: #a3b3c2;
    --ink-3: #7a8b9b;

    --ok: #4cc38a;
    --ok-soft: #14291f;
    --bad: #f0857c;
    --bad-soft: #33201e;
    --warn: #e2b34c;
    --warn-soft: #2d2617;
    --focus: #5db3e8;

    --accent: #41d1c4;
    --accent-soft: #10333a;
    --on-accent: #06171b;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

/* The explicit choice overrides the system in both directions. */
:root[data-theme="dark"] {
  --bg: #0f151c;
  --bg-sunken: #0a0f14;
  --panel: #182029;
  --panel-2: #1e2831;
  --line: #2b3742;
  --line-soft: #222c36;
  --ink: #e6edf4;
  --ink-2: #a3b3c2;
  --ink-3: #7a8b9b;
  --ok: #4cc38a;
  --ok-soft: #14291f;
  --bad: #f0857c;
  --bad-soft: #33201e;
  --warn: #e2b34c;
  --warn-soft: #2d2617;
  --focus: #5db3e8;
  --accent: #41d1c4;
  --accent-soft: #10333a;
  --on-accent: #06171b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}