/* ---------------------------------------------------------------------------
   Overprint — design tokens
   A print-shop palette: warm paper, dense ink, a single safety-orange signal.
   Light is the default surface; dark reads as a darkroom under a safelight.
--------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --paper:        #f2f0ea;
  --paper-sunk:   #e8e5dc;
  --paper-raised: #fbfaf7;

  /* Ink */
  --ink:          #16150f;
  --ink-soft:     #4c4739;
  --ink-mute:     #87806c;

  /* Rules — hairlines do the structural work that borders usually do */
  --rule:         rgb(22 21 15 / 0.16);
  --rule-strong:  rgb(22 21 15 / 0.34);
  --rule-faint:   rgb(22 21 15 / 0.07);

  /* Signal */
  --signal:       #e63f0c;
  --signal-deep:  #c33409;
  --signal-on:    #fff8f4;
  --signal-wash:  rgb(230 63 12 / 0.10);

  --danger:       #b4291b;

  /* Type */
  --font-ui:      'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo Black', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* A four-step scale keeps the spec-sheet rhythm honest */
  --step-0:  0.6875rem;   /* 11px — mono labels */
  --step-1:  0.8125rem;   /* 13px — body */
  --step-2:  0.9375rem;   /* 15px — inputs */
  --step-3:  1.125rem;    /* 18px */

  --track:   0.16em;      /* label letter-spacing */

  /* Space — 4px base */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --rail-w: 23rem;
  --bar-h:  3.5rem;

  /* Square by default; 2px is the only concession */
  --radius: 2px;

  --ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --fast:   120ms var(--ease);
  --slow:   240ms var(--ease);

  --shadow-plate: 0 1px 2px rgb(22 21 15 / 0.10), 0 12px 32px -12px rgb(22 21 15 / 0.28);
}

:root[data-theme='dark'],
:root:not([data-theme='light']) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --paper:        #100f0d;
    --paper-sunk:   #0a0a08;
    --paper-raised: #1a1815;

    --ink:          #ebe7dc;
    --ink-soft:     #a7a08e;
    --ink-mute:     #6e6858;

    --rule:         rgb(235 231 220 / 0.16);
    --rule-strong:  rgb(235 231 220 / 0.32);
    --rule-faint:   rgb(235 231 220 / 0.07);

    --signal:       #ff5c22;
    --signal-deep:  #ff7a49;
    --signal-on:    #17130f;
    --signal-wash:  rgb(255 92 34 / 0.12);

    --danger:       #ff6b5a;

    --shadow-plate: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 40px -14px rgb(0 0 0 / 0.7);
  }
}

/* Explicit choice wins over the system preference, in both directions. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --paper:        #100f0d;
  --paper-sunk:   #0a0a08;
  --paper-raised: #1a1815;

  --ink:          #ebe7dc;
  --ink-soft:     #a7a08e;
  --ink-mute:     #6e6858;

  --rule:         rgb(235 231 220 / 0.16);
  --rule-strong:  rgb(235 231 220 / 0.32);
  --rule-faint:   rgb(235 231 220 / 0.07);

  --signal:       #ff5c22;
  --signal-deep:  #ff7a49;
  --signal-on:    #17130f;
  --signal-wash:  rgb(255 92 34 / 0.12);

  --danger:       #ff6b5a;

  --shadow-plate: 0 1px 2px rgb(0 0 0 / 0.5), 0 16px 40px -14px rgb(0 0 0 / 0.7);
}