/* ==========================================================================
   Wavemelt Design System — Phase 1 Foundation
   "A Catalogue of Liquid Motion"
   Swiss / editorial type-specimen catalogue. Warm paper, ink, hairlines,
   one vermilion accent. Zero-dependency type. No gradients, no glows,
   no glassmorphism, no big radii, no drop shadows.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* --- Paper grounds (warm, never pure-black-default) --- */
  --paper:            #F2F0E9; /* primary ground */
  --paper-panel:      #E8E5DC; /* secondary panels */
  --stage:            #14130F; /* the ONLY dark surface (specimen stage) */

  /* --- Ink (warm near-black + greys) --- */
  --ink:              #14130F; /* primary text */
  --ink-secondary:    #5C5A52; /* secondary text */
  --ink-tertiary:     #8C8A80; /* tertiary text / captions */
  --ink-on-stage:     #F2F0E9; /* text on the dark stage */

  /* --- Hairlines / rules --- */
  --rule:             rgba(20, 19, 15, 0.14);
  --rule-strong:      rgba(20, 19, 15, 0.28);
  --rule-on-stage:    rgba(242, 240, 233, 0.18);

  /* --- One accent only: vermilion, used like registration ink --- */
  --accent:           #E5341D; /* borders / fills only */
  /* AA-compliant vermilion for accent TEXT on paper/panel (5.5:1 / 5.0:1).
     Keeps the same registration-ink hue, darkened just enough to pass WCAG AA
     body contrast where the accent carries meaning as text (prices, numbers). */
  --accent-text:      #B82610;

  /* --- Type families: system stack, no downloaded fonts --- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale (rem) — 8 steps --- */
  --t-0:  0.75rem;   /* caption / micro-label */
  --t-1:  0.875rem;  /* small / secondary */
  --t-2:  1rem;      /* body */
  --t-3:  1.25rem;   /* lead / small heading */
  --t-4:  1.75rem;   /* h3 */
  --t-5:  2.5rem;    /* h2 */
  --t-6:  4rem;      /* h1 / display */
  --t-7:  6rem;      /* masthead / hero display */

  /* --- Weights (limited: 400 / 500 / 700) --- */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;

  /* --- Tracking --- */
  --track-display: -0.03em; /* tight on large display sizes */
  --track-label:    0.12em; /* open on small uppercase labels */

  /* --- Spacing scale --- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;

  /* --- Grid --- */
  --grid-columns: 12;
  --grid-gutter:  1.5rem;
  --page-margin:  3rem;
  --page-max:     1320px;

  /* --- Corners: sharp / minimal only --- */
  --radius:       2px;

  /* --- Motion: short, mechanical, no easing flourish --- */
  --motion:       120ms linear;
  --motion-slow:  200ms ease;
}

/* ---------------------------------------------------------------------------
   2. MODERN RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body { line-height: 1.55; -webkit-font-smoothing: antialiased; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; color: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   3. BASE ELEMENTS
   --------------------------------------------------------------------------- */
html {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 100%;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-2);
  font-weight: var(--w-regular);
  font-feature-settings: "tnum" 1; /* tabular figures by default */
}

/* Headings — hierarchy from size / weight / case / spacing only */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  line-height: 1.05;
  color: var(--ink);
}

h1 { font-size: var(--t-6); letter-spacing: var(--track-display); }
h2 { font-size: var(--t-5); letter-spacing: var(--track-display); }
h3 { font-size: var(--t-4); letter-spacing: -0.02em; line-height: 1.1; }
h4 { font-size: var(--t-3); font-weight: var(--w-medium); letter-spacing: -0.01em; line-height: 1.2; }
h5 { font-size: var(--t-2); font-weight: var(--w-medium); }
h6 { font-size: var(--t-1); font-weight: var(--w-medium); }

/* Display modifier for masthead-scale type */
.display {
  font-size: var(--t-7);
  font-weight: var(--w-bold);
  line-height: 0.96;
  letter-spacing: var(--track-display);
}

p { line-height: 1.6; color: var(--ink); max-width: 68ch; }

.lead { font-size: var(--t-3); line-height: 1.5; color: var(--ink-secondary); font-weight: var(--w-regular); }

small, .small { font-size: var(--t-1); }

a {
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--motion);
}
a:hover { color: var(--accent-text); }

strong, b { font-weight: var(--w-bold); }

/* Small uppercase Swiss label — mono, open tracking */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-0);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-secondary);
}

.label--accent { color: var(--accent-text); }

/* Mono numerals / inline code / spec values */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Secondary / tertiary text helpers */
.text-secondary { color: var(--ink-secondary); }
.text-tertiary  { color: var(--ink-tertiary); }
.text-accent    { color: var(--accent-text); }

/* ---------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */

/* Page container with real margins */
.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

/* 12-column grid */
.grid12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* Column span helpers */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Hairline rules */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.rule--strong { border-top-color: var(--rule-strong); }
.rule--accent { border-top-color: var(--accent); }

.hairline-top    { border-top: 1px solid var(--rule); }
.hairline-bottom { border-bottom: 1px solid var(--rule); }
.hairline-left   { border-left: 1px solid var(--rule); }
.hairline-right  { border-right: 1px solid var(--rule); }

/* Catalogue / specimen number — mono, vermilion */
.specimen-no {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--accent-text);
}

/* The dark stage — the only inverted surface */
.stage {
  background: var(--stage);
  color: var(--ink-on-stage);
}
.stage a { color: var(--ink-on-stage); }
.stage a:hover { color: var(--accent); }
.stage .label { color: var(--ink-tertiary); }

/* ---------------------------------------------------------------------------
   5. CORE COMPONENTS (structure only, Swiss)
   --------------------------------------------------------------------------- */

/* Buttons — sharp, 1px ink border, no shadow */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--t-1);
  font-weight: var(--w-medium);
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover { text-decoration: none; }

/* Accent fill — the one place vermilion fills */
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn--accent:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Ghost — hairline only, no fill until hover */
.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink-secondary);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

/* Spec-sheet / data table — hairline rows */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-1);
}
.data-table caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-secondary);
  padding-bottom: var(--s-3);
}
.data-table th,
.data-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.data-table thead th {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: var(--t-0);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-secondary);
  border-bottom: 1px solid var(--rule-strong);
}
/* Spec key/value layout: label column muted, value column mono */
.data-table th[scope="row"] {
  font-weight: var(--w-regular);
  color: var(--ink-secondary);
  width: 40%;
}
.data-table td.val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.data-table tr:last-child th,
.data-table tr:last-child td { border-bottom: none; }

/* Numbered catalogue index line */
.index-row {
  display: grid;
  grid-template-columns: 4rem 1fr 9rem 12rem 5rem;
  align-items: baseline;
  column-gap: var(--grid-gutter);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--motion);
}
.index-row:hover { background: var(--paper-panel); }
.index-row__no {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.index-row__name { font-weight: var(--w-medium); color: var(--ink); }
.index-row__category {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}
.index-row__spec {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-secondary);
}
.index-row__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink);
}

/* Small mono category chip */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--t-0);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-secondary);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
}
.tag--accent {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Legacy aliases for app.js inline styles
   app.js injects inline styles referencing these older token names. Map each
   to the nearest current token so its inline var() calls resolve. Only the
   vars app.js actually references are aliased.
   --------------------------------------------------------------------------- */
:root {
  --text-secondary: var(--ink-secondary);
  --text-tertiary:  var(--ink-tertiary);
  --border-primary: var(--rule-strong);
  --font-heading:   var(--font-sans);
}