/* ============================================================
   Because We Scan — Core Tokens
   Warm, archival, material-first. Kvadrat / Dinesen territory.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter+Tight:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ---------- Brand ink ----------
     A paper-warm bone, through tea-stained tans, to a deep
     near-black that reads as ink on uncoated stock. */

  --ink-0:   #f6f2ea;   /* bone / paper — primary bg      */
  --ink-50:  #ede7d8;   /* warm off-white                 */
  --ink-100: #ddd4bf;   /* parchment                      */
  --ink-200: #b8ad94;   /* dust                           */
  --ink-300: #8a7e68;   /* stone                          */
  --ink-400: #5a4f3d;   /* walnut                         */
  --ink-600: #2e271c;   /* espresso                       */
  --ink-800: #16120c;   /* near-black, warm               */
  --ink-900: #0a0804;   /* deepest ink                    */

  /* Brand accent — tungsten amber. The one hot colour.
     Used sparingly: logo mark, primary CTA, rule lines. */
  --amber-50:  #fbeedc;
  --amber-100: #f6d9a9;
  --amber-300: #e8a24a;
  --amber-500: #d97a18;
  --amber-600: #b35c0c;
  --amber-800: #6d3807;

  /* Material palette — the honest colours of flooring.
     Used for process diagrams, section backgrounds, and the
     sample-library viewer. Not for UI state. */
  --mat-oak:        #c9a673;
  --mat-walnut:     #6e4a2a;
  --mat-travertine: #d8c9a8;
  --mat-slate:      #4a4e54;
  --mat-terracotta: #b2614a;
  --mat-wool:       #c9c0ae;
  --mat-concrete:   #a9a49a;

  /* ---------- Surfaces ---------- */
  --surface-paper:    var(--ink-0);
  --surface-paper-2:  var(--ink-50);
  --surface-paper-3:  var(--ink-100);
  --surface-ink:      var(--ink-800);
  --surface-ink-2:    var(--ink-600);

  --border-hair:      rgba(22, 18, 12, 0.14);
  --border-hair-strong: rgba(22, 18, 12, 0.28);
  --border-on-ink:    rgba(246, 242, 234, 0.14);

  /* Foreground text */
  --fg-1: var(--ink-800);       /* primary text on paper  */
  --fg-2: var(--ink-600);       /* secondary              */
  --fg-3: var(--ink-400);       /* tertiary / caption     */
  --fg-mute: var(--ink-200);    /* disabled               */

  --fg-on-ink-1: var(--ink-0);
  --fg-on-ink-2: #c9c0ae;
  --fg-on-ink-3: #8a7e68;

  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Georgia", serif;                                /* editorial */
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Menlo", monospace;

  /* Type scale — tuned for print as well as screen. */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  38px;
  --text-3xl:  52px;
  --text-4xl:  72px;
  --text-5xl:  104px;
  --text-6xl:  148px;     /* billboard — booth backdrop  */

  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.14em;

  /* ---------- Space / shape ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;
  /* The brand prefers hard corners over rounded — radii are
     reserved for buttons and small pills. Cards, images,
     and panels are ALWAYS square. */

  /* Tight, close shadows only. No glow, no lift. */
  --shadow-1: 0 1px 0 rgba(22, 18, 12, 0.06), 0 1px 2px rgba(22, 18, 12, 0.08);
  --shadow-2: 0 1px 0 rgba(22, 18, 12, 0.08), 0 6px 16px rgba(22, 18, 12, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(22, 18, 12, 0.06);

  /* Paper grain — subtle uncoated-stock texture. */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.086 0 0 0 0 0.070 0 0 0 0 0.047 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); /* @kind other */
}

/* ============================================================
   Semantic element defaults
   ============================================================ */

html, body {
  background: var(--surface-paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Fraunces for everything editorial. Opsz is the
   secret: huge type gets big optical size, small type gets
   text optical size, so it reads right at every scale. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 144;
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 96;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-variation-settings: "opsz" 48;
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

/* Display XL — for booth backdrop, billboard, hero */
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-5xl);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 144;
}
.display-billboard {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-6xl);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}

p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: 62ch;
}
.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg-1);
  max-width: 56ch;
}

/* Eyebrow — the ALL CAPS mono tag that precedes a heading.
   Core brand signature. Used on every section. */
.eyebrow, .overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Data / technical text — mono for every number, coordinate,
   filename, resolution, dimension. The brand's data voice. */
.data, code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  font-feature-settings: "tnum" 1, "zero" 1, "cv08" 1;
}
pre, code {
  background: var(--surface-paper-2);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-xs);
}
code { padding: 1px 6px; }
pre  { padding: var(--space-4); overflow: auto; }

/* Hairline divider — brand staple */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--border-hair);
  margin: var(--space-6) 0;
}
.rule-ink { border-top-color: var(--ink-800); }

/* Dark surface default — for "ink" sections */
.on-ink {
  background: var(--surface-ink);
  color: var(--fg-on-ink-1);
}
.on-ink .eyebrow { color: var(--fg-on-ink-3); }
.on-ink p { color: var(--fg-on-ink-2); }
.on-ink hr { border-top-color: var(--border-on-ink); }

/* Spec line — the format we use everywhere to present a
   number-with-unit-with-qualifier. E.g.:
     60 000 × 48 000 PX · 16-BIT LINEAR TIFF
*/
.spec {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Number XL — huge tabular figures, as used for the
   headline stats on the landing page and leaflet */
.num-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--text-4xl);
  font-variation-settings: "opsz" 144;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}