/* ───────── Stampa - Lumen Warm · LIGHT MODE design tokens ───────── */
/* Same variable names as tokens.css, remapped to the Lumen Warm light palette:
   white paper, slate ink, terracotta accent (#C0492A), warm amber (#D98A3D), Rubik type. */

:root {
  /* Paper & ink - Lumen light */
  --paper:        #FFFFFF;   /* white page bg */
  --paper-2:      #F1F5F9;   /* slate-100 - recessed */
  --panel:        #FFFFFF;   /* card surfaces */
  --panel-warm:   #F8FAFC;   /* slate-50 - tinted card variant */
  --ink:          #0F172A;   /* slate-900 */
  --ink-soft:     #334155;   /* slate-700 */
  --ink-muted:    #64748B;   /* slate-500 */
  --ink-faint:    #94A3B8;   /* slate-400 */
  --rule:         #E2E8F0;   /* slate-200 - hairline borders */
  --rule-strong:  #CBD5E1;   /* slate-300 */

  --stamp:        #C0492A;   /* primary accent - terracotta */
  --stamp-hover:  #9F3A1E;   /* accent deep */
  --stamp-ink:    #9F3A1E;   /* deepest accent */
  --stamp-soft:   rgba(192, 73, 42, 0.10);
  --stamp-glow:   rgba(192, 73, 42, 0.16);

  --amber:        #D98A3D;   /* secondary - warm amber (sky2) */
  --sage:         #4F7B53;   /* success */
  --rust:         #C0492A;   /* danger / record - uses accent in Lumen */
  --ocean:        #2C5A78;   /* info/cobalt option */
  --plum:         #5F3C66;   /* aux */

  /* Category swatches */
  --cat-paint:    #4A7BA8;
  --cat-floor:    #C26A28;
  --cat-elec:     #C99A2B;
  --cat-plumb:    #3D7A52;
  --cat-gyp:      #7C5A88;
  --cat-demo:     #B0432F;
  --cat-wood:     #8B5B3C;
  --cat-alum:     #6B7C88;
  --cat-misc:     #8A8474;

  /* Type scale - Lumen uses Rubik throughout */
  --font-display: "Rubik", system-ui, -apple-system, sans-serif;
  --font-sans:    "Rubik", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-card: 0 1px 0 rgba(15,23,42,0.04), 0 8px 24px -10px rgba(15,23,42,0.10);
  --shadow-lift: 0 1px 0 rgba(15,23,42,0.04), 0 18px 40px -16px rgba(15,23,42,0.16);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Paper texture - applied to .paper containers */
.paper-tex {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 22% 18%, rgba(15,23,42,0.022) 0, transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(15,23,42,0.018) 0, transparent 40%);
  background-size: 100% 100%;
}

.hairline { border: 1px solid var(--rule); }
.hairline-strong { border: 1px solid var(--rule-strong); }

/* Type helpers */
.font-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
.font-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.smallcaps    {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
}
.tabular { font-variant-numeric: tabular-nums; }

/* Stamp seal */
.seal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--stamp);
  color: var(--stamp);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  background: transparent;
  transform: rotate(-6deg);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.55;
}
.seal--worn { opacity: 0.92; }

/* Section index */
.idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--stamp); color: #fff; }
.btn--primary:hover { background: var(--stamp-hover); }
.btn--stamp { background: var(--stamp); color: #fff; }
.btn--stamp:hover { background: var(--stamp-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--panel-warm); }

/* Tiny pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--stamp-soft);
  color: var(--stamp);
  text-transform: uppercase;
}
.pill--ink { background: rgba(15,23,42,0.06); color: var(--ink); }
.pill--amber { background: rgba(217,138,61,0.14); color: var(--amber); }
.pill--sage { background: rgba(79,123,83,0.16); color: var(--sage); }

/* Category dot */
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }