/* Design tokens.
 *
 * Dark is the default because sessions happen at night and a bright page is
 * hostile after 20 minutes of concentration. Light is a full sibling, not an
 * inversion. Status colours come from a validated palette and are always paired
 * with a text label, so hue never carries meaning alone.
 */

:root {
  color-scheme: dark;

  /* surfaces */
  --plane:        #0d0d0d;
  --surface-1:    #1a1a19;
  --surface-2:    #212120;
  --surface-3:    #2a2a28;
  --border:       rgba(255, 255, 255, 0.085);
  --border-strong:rgba(255, 255, 255, 0.16);

  /* ink */
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --ink-3:        #898781;
  --ink-4:        #6a6963;

  /* accent — UI chrome only, never a data mark */
  --accent:       #e3b04b;
  --accent-soft:  rgba(227, 176, 75, 0.14);
  --accent-line:  rgba(227, 176, 75, 0.32);
  --on-accent:    #17170f;

  /* status (fixed palette; always shipped with a label) */
  --st-unknown:   #898781;
  --st-fragile:   #d03b3b;
  --st-untimed:   #ec835a;
  --st-slow:      #fab219;
  --st-ready:     #0ca30c;
  --st-stale:     #9085e9;

  /* data marks */
  --mark-1:       #3987e5;
  --mark-track:   rgba(255, 255, 255, 0.09);
  --grid:         #2c2c2a;

  --good:         #0ca30c;
  --bad:          #e66767;

  /* type */
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* geometry */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.44), 0 2px 8px rgba(0, 0, 0, 0.36);

  --rail: 232px;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --plane:        #f4f3ef;
  --surface-1:    #fcfcfb;
  --surface-2:    #ffffff;
  --surface-3:    #f4f3ef;
  --border:       rgba(11, 11, 11, 0.09);
  --border-strong:rgba(11, 11, 11, 0.18);

  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-3:        #767570;
  --ink-4:        #92918b;

  --accent:       #8a5a12;
  --accent-soft:  rgba(138, 90, 18, 0.09);
  --accent-line:  rgba(138, 90, 18, 0.26);
  --on-accent:    #ffffff;

  --st-unknown:   #898781;
  --st-fragile:   #d03b3b;
  --st-untimed:   #c9612f;
  --st-slow:      #a97a09;
  --st-ready:     #0a8a0a;
  --st-stale:     #4a3aa7;

  --mark-1:       #2a78d6;
  --mark-track:   rgba(11, 11, 11, 0.08);
  --grid:         #e1e0d9;

  --good:         #006300;
  --bad:          #c53434;

  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 4px 16px rgba(11, 11, 11, 0.07), 0 1px 2px rgba(11, 11, 11, 0.05);
  --shadow-3: 0 18px 48px rgba(11, 11, 11, 0.12), 0 2px 8px rgba(11, 11, 11, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}