/*
 * Ervic Labs — design tokens
 * "Lab notebook": warm paper, dense ink, one signal color.
 * Every Ervic Labs app loads this file first, then base.css.
 */

:root {
  color-scheme: light dark;

  /* Paper and ink */
  --el-paper: #f3efe6;
  --el-paper-raised: #faf7f0;
  --el-paper-sunk: #e9e3d6;
  --el-ink: #16140f;
  --el-ink-soft: #4a463c;
  --el-ink-faint: #8b8474;
  --el-rule: #d6cfbf;
  --el-grid: rgb(22 20 15 / 0.045);

  /* Signal: the one loud color. Use sparingly. */
  --el-signal: #e2461b;
  --el-signal-ink: #fff8f2;
  --el-signal-soft: rgb(226 70 27 / 0.12);

  /* Status colors for specimen labels */
  --el-live: #1c7a55;
  --el-draft: #b07a12;
  --el-parked: #7a7468;

  /* Type */
  --el-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --el-font-body: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --el-font-mono: "Martian Mono", "SFMono-Regular", ui-monospace, monospace;

  --el-step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --el-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --el-step-1: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --el-step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --el-step-3: clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --el-step-4: clamp(3rem, 1.9rem + 5.4vw, 6.4rem);

  /* Space and shape */
  --el-space-1: 0.25rem;
  --el-space-2: 0.5rem;
  --el-space-3: 0.75rem;
  --el-space-4: 1rem;
  --el-space-5: 1.5rem;
  --el-space-6: 2rem;
  --el-space-7: 3rem;
  --el-space-8: 5rem;
  --el-gutter: clamp(1rem, 4vw, 3rem);
  --el-measure: 62ch;
  --el-max: 76rem;
  --el-radius: 3px;
  --el-border: 1px solid var(--el-rule);

  /* Motion */
  --el-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --el-dur: 420ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --el-paper: #13120f;
    --el-paper-raised: #1b1a16;
    --el-paper-sunk: #0d0c0a;
    --el-ink: #efe9dc;
    --el-ink-soft: #bdb5a4;
    --el-ink-faint: #7f786a;
    --el-rule: #34312a;
    --el-grid: rgb(239 233 220 / 0.035);
    --el-signal: #ff6a3d;
    --el-signal-ink: #1a0b05;
    --el-signal-soft: rgb(255 106 61 / 0.14);
    --el-live: #4cc28f;
    --el-draft: #e0a93b;
    --el-parked: #8f887a;
  }
}

:root[data-theme="dark"] {
  --el-paper: #13120f;
  --el-paper-raised: #1b1a16;
  --el-paper-sunk: #0d0c0a;
  --el-ink: #efe9dc;
  --el-ink-soft: #bdb5a4;
  --el-ink-faint: #7f786a;
  --el-rule: #34312a;
  --el-grid: rgb(239 233 220 / 0.035);
  --el-signal: #ff6a3d;
  --el-signal-ink: #1a0b05;
  --el-signal-soft: rgb(255 106 61 / 0.14);
  --el-live: #4cc28f;
  --el-draft: #e0a93b;
  --el-parked: #8f887a;
}