/* praxis tokens — derived from the oxide kit logotype (ink #201E1D, oxide #A8432A).
   Implementation imports this file unchanged. Light is the default; dark via [data-theme="dark"] or OS preference. */
:root {
  /* colour */
  --paper: #F4F1EA;      /* page */
  --paper-2: #FCFBF8;    /* cards, bars, inputs */
  --paper-3: #EAE6DD;    /* hover, muted chips, code */
  --line: #D9D3C7;
  --ink: #201E1D;
  --ink-2: #504B46;      /* secondary text, 7.3:1 on paper */
  --ink-3: #6B645C;      /* muted text, 5.0:1 on paper */
  --oxide: #A8432A;      /* brand accent; fail / failed / danger / links, 5.6:1 */
  --oxide-ink: #86331F;  /* link hover */
  --oxide-tint: #F5E1DA;
  --pass: #2F6B3E;       /* 6.0:1 on paper */
  --pass-tint: #DCEBDD;
  --warn: #7E5410;       /* stale / verify / unverified / lapsed, 6.3:1 */
  --warn-tint: #F3E6CB;
  --focus: var(--ink);
  color-scheme: light;

  /* type */
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 28px; --fs-7: 40px;
  --lh-tight: 1.2; --lh-body: 1.45;
  --track-eyebrow: .06em;

  /* spacing (4-based) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* radius */
  --r-1: 2px; --r-2: 4px;

  /* shadow (hairlines preferred; shadows only for floating layers) */
  --shadow-1: 0 1px 2px rgba(32, 30, 29, .08);
  --shadow-modal: 0 12px 32px rgba(32, 30, 29, .18);

  /* z-index */
  --z-nav: 10; --z-toast: 50; --z-modal: 100;

  /* control sizes */
  --tap: 44px; --control: 36px;
}

[data-theme="dark"] {
  --paper: #171615;
  --paper-2: #1F1D1B;
  --paper-3: #2A2724;
  --line: #3B3733;
  --ink: #F2EEE7;
  --ink-2: #CBC5BA;      /* 10:1 */
  --ink-3: #A29B90;      /* 6.2:1 */
  --oxide: #E2835F;      /* 6.2:1 */
  --oxide-ink: #EDA084;
  --oxide-tint: #3B241C;
  --pass: #86C797;
  --pass-tint: #1E2F23;
  --warn: #E0B35E;
  --warn-tint: #332A18;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171615; --paper-2: #1F1D1B; --paper-3: #2A2724; --line: #3B3733;
    --ink: #F2EEE7; --ink-2: #CBC5BA; --ink-3: #A29B90;
    --oxide: #E2835F; --oxide-ink: #EDA084; --oxide-tint: #3B241C;
    --pass: #86C797; --pass-tint: #1E2F23; --warn: #E0B35E; --warn-tint: #332A18;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-modal: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}