/* ============================================================
   AppKeep · design tokens · v0.34 (2026-04-29)
   Per design brief v3 §6, handed off via Claude Design.
   Three brand variants share scale & rhythm; only paper, ink,
   signal hue change. Default brand: A · Teak.
   ============================================================ */

/* ---- TYPE ---- */
:root {
  --font-sans:  "Inter Tight", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "GT Sectra", "Sectra", Georgia, serif;
  --font-mono:  "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

/* ============================================================
   BRAND A · Teak  (default)
   warm cream paper, espresso ink, teak signal, oxblood emergency.
   ============================================================ */
:root,
:root[data-brand="A"] {
  /* paper stack */
  --paper:        oklch(96.4% 0.012 75);
  --paper-deep:   oklch(93.0% 0.018 75);
  --paper-card:   oklch(98.2% 0.008 75);
  --paper-ink:    oklch(20.0% 0.015 60);

  /* ink stack */
  --ink:          oklch(22.0% 0.018 60);
  --ink-quiet:    oklch(38.0% 0.014 60);
  --ink-faint:    oklch(55.0% 0.010 60);
  --ink-hairline: oklch(72.0% 0.008 60);

  /* rules */
  --rule:        1px solid oklch(82.0% 0.010 70);
  --rule-soft:   1px solid oklch(88.0% 0.008 70);
  --rule-ink:    1px solid var(--ink);

  /* signal — teak (the one editorial colour) */
  --signal:       oklch(48.0% 0.075 55);
  --signal-soft:  oklch(82.0% 0.040 55);
  --teak:         var(--signal);
  --teak-soft:    var(--signal-soft);
  --teak-deep:    oklch(38.0% 0.085 50);
  --teak-wash:    oklch(92.0% 0.024 60);

  /* emergency — oxblood (used <1% of surfaces) */
  --alert:        oklch(38.0% 0.110 25);
  --alert-soft:   oklch(78.0% 0.055 25);

  /* affirmative — moss */
  --good:         oklch(45.0% 0.060 145);
  --good-soft:    oklch(85.0% 0.030 145);

  /* condition tones (app meters) */
  --cond-moss:    oklch(48.0% 0.060 145);
  --cond-amber:   oklch(58.0% 0.110 75);
  --cond-alert:   oklch(45.0% 0.110 25);

  --shadow-soft:  0 1px 0 oklch(82.0% 0.010 70);

  /* legacy aliases for components migrated in earlier passes */
  --plaster:      oklch(88.0% 0.008 70);
  --bg:           var(--paper);
  --surface:      var(--paper-card);
  --text:         var(--ink);
  --text-secondary: var(--ink-quiet);
  --muted:        var(--ink-quiet);
  --border:       var(--ink-hairline);
  --accent:       var(--teak);
  --accent-hover: var(--teak-deep);
  --accent-light: var(--teak-wash);
  --accent-glow:  oklch(48.0% 0.075 55 / 0.12);
  --bg-dark:      var(--ink);
  --surface-dark: oklch(28.0% 0.018 60);
  --border-dark:  oklch(38.0% 0.014 60);
  --text-on-dark: var(--paper);
  --text-secondary-on-dark: oklch(78.0% 0.012 60);
  --radius:       4px;
  --radius-lg:    6px;
  --radius-xl:    10px;
  --shadow:       0 1px 0 oklch(82.0% 0.010 70);
  --shadow-lg:    0 12px 30px oklch(0% 0 0 / 0.10);
  --font-display: var(--font-sans);
  --font:         var(--font-sans);
  --max-width:    760px;
  --max-width-wide: 1200px;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   BRAND B · Rijks  cool, museum-grey, ink-blue signal
   ============================================================ */
:root[data-brand="B"] {
  --paper:        oklch(95.5% 0.006 230);
  --paper-deep:   oklch(91.0% 0.008 230);
  --paper-card:   oklch(98.0% 0.004 230);
  --paper-ink:    oklch(20.0% 0.020 245);

  --ink:          oklch(22.0% 0.025 245);
  --ink-quiet:    oklch(38.0% 0.018 245);
  --ink-faint:    oklch(55.0% 0.012 245);
  --ink-hairline: oklch(72.0% 0.008 240);

  --rule:        1px solid oklch(82.0% 0.008 235);
  --rule-soft:   1px solid oklch(88.0% 0.006 235);
  --rule-ink:    1px solid var(--ink);

  --signal:       oklch(38.0% 0.110 245);
  --signal-soft:  oklch(80.0% 0.060 245);
  --teak:         var(--signal);
  --teak-soft:    var(--signal-soft);
  --teak-deep:    oklch(28.0% 0.120 245);
  --teak-wash:    oklch(92.0% 0.030 245);

  --alert:        oklch(40.0% 0.110 30);
  --alert-soft:   oklch(78.0% 0.055 30);
  --good:         oklch(45.0% 0.060 165);
  --good-soft:    oklch(85.0% 0.030 165);

  --cond-moss:    oklch(48.0% 0.060 165);
  --cond-amber:   oklch(58.0% 0.110 75);
  --cond-alert:   oklch(45.0% 0.110 30);

  --shadow-soft:  0 1px 0 oklch(82.0% 0.008 235);
}

/* ============================================================
   BRAND C · Almanac  bone paper, terracotta signal
   ============================================================ */
:root[data-brand="C"] {
  --paper:        oklch(95.0% 0.018 90);
  --paper-deep:   oklch(91.0% 0.024 88);
  --paper-card:   oklch(97.5% 0.012 90);
  --paper-ink:    oklch(20.0% 0.020 50);

  --ink:          oklch(20.0% 0.020 50);
  --ink-quiet:    oklch(38.0% 0.016 50);
  --ink-faint:    oklch(56.0% 0.012 60);
  --ink-hairline: oklch(72.0% 0.010 70);

  --rule:        1px solid oklch(80.0% 0.014 70);
  --rule-soft:   1px solid oklch(87.0% 0.010 70);
  --rule-ink:    1px solid var(--ink);

  --signal:       oklch(50.0% 0.130 35);
  --signal-soft:  oklch(82.0% 0.060 35);
  --teak:         var(--signal);
  --teak-soft:    var(--signal-soft);
  --teak-deep:    oklch(38.0% 0.140 30);
  --teak-wash:    oklch(92.0% 0.040 35);

  --alert:        oklch(40.0% 0.140 25);
  --alert-soft:   oklch(80.0% 0.060 25);
  --good:         oklch(45.0% 0.070 145);
  --good-soft:    oklch(85.0% 0.034 145);

  --cond-moss:    oklch(45.0% 0.070 145);
  --cond-amber:   oklch(58.0% 0.110 75);
  --cond-alert:   oklch(45.0% 0.130 25);

  --shadow-soft:  0 1px 0 oklch(80.0% 0.014 70);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  overflow-x: hidden;
}

::selection { background: var(--signal-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; cursor: pointer; transition: color 120ms ease; }
button { font-family: inherit; cursor: pointer; }

.tabular   { font-variant-numeric: tabular-nums; }
.mono      { font-family: var(--font-mono); }
.serif     { font-family: var(--font-serif); }

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1, h2, h3, h4 { font-family: var(--font-sans); margin: 0; letter-spacing: -0.02em; line-height: 1.05; font-weight: 700; }
h1 { font-size: clamp(44px, 6vw, 80px); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.015em; }
p  { margin: 0; line-height: 1.55; }