/* ----------------
   TEN Developments · Core Tokens
   Generated from BRAND-GUIDE.md v5.4. This file is the canonical token sheet
   for every TEN surface (marketing, app, consulting). All other CSS imports it.
   ---------------- */

/* ---------------- @font-face · TYPE STACK ---------------- */
/* Each cut is its own family. CSS never sets font-weight; switch family. */

/* WOFF2 only. Desktop OTF cuts removed. */
@font-face {
  font-family: "Tiempos Headline Medium";
  src: url("./fonts/tiempos-headline-medium.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text Semibold";
  src: url("./fonts/tiempos-text-semibold.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text Medium Italic";
  src: url("./fonts/tiempos-text-medium-italic.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Buch";
  src: url("./fonts/soehne-buch.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Halbfett";
  src: url("./fonts/soehne-halbfett.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Kräftig";
  src: url("./fonts/soehne-kraftig.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Mono Buch";
  src: url("./fonts/soehne-mono-buch.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Mono Halbfett";
  src: url("./fonts/soehne-mono-halbfett.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Söhne Mono Kräftig";
  src: url("./fonts/soehne-mono-kraftig.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* ---------------- COLOR · SPINE (90% of every surface) ---------------- */
  --paper:       #F4F1E8;
  --paper-2:     #E9E4D8;
  --paper-3:     #D7D0C1;
  --ink:         #0B0F12;
  --ink-2:       #3C3F41;
  --ink-3:       #545759;
  --ink-4:       #6D6F71;
  --ink-soft:    #797B7D;
  --ink-line:    #E2E2E3;
  --ink-rule:    #CECFD0;
  --storm:       #0F1B2D;

  /* ---------------- COLOR · EMPHASIS TIER ---------------- */
  /* CTA orange: BUTTONS ONLY. One per page maximum. */
  --cta:         #FF9900;
  --cta-deep:    #E68A00;
  /* Hydro: one focal interactive element per layout. Links, focus, secondary CTAs. */
  --hydro:       #1E6BFF;
  --hydro-deep:  #1751CC;
  /* Hydro tint: chart fills, focal callout backgrounds, table-row highlights. */
  --rain:        #B8D4FF;

  /* ---------------- COLOR · STATUS (plan-sheet labels) ---------------- */
  --flag:        #B7361E;
  --pass:        #2F6B3E;
  --pending:     #B58A1E;
  --sediment:    #7A6B4A;

  /* ---------------- COLOR · ACTION (high-alert buttons) ---------------- */
  --danger:      #E42C0C;
  --go:          #0F8B2E;

  /* ---------------- COLOR · PRODUCT ---------------- */
  --ten-hydrology: #1DBDB6;
  --ten-sewer:     #0B0F12;
  --ten-workflow:  #A8326B;

  /* ---------------- COLOR · DATA-VIZ SEQUENTIAL ---------------- */
  --viz-1: #E5F0FF;
  --viz-2: #A8C8F2;
  --viz-3: #5C92E0;
  --viz-4: #2C5FB8;
  --viz-5: #0F2F7A;

  /* ---------------- TYPE FAMILIES ---------------- */
  --font-display-hero:    "Tiempos Headline Medium", Georgia, "Times New Roman", serif;
  --font-display:         "Tiempos Text Semibold",  Georgia, "Times New Roman", serif;
  --font-display-italic:  "Tiempos Text Medium Italic", Georgia, "Times New Roman", serif;
  --font-sans:            "Söhne Buch",      "Inter", system-ui, sans-serif;
  --font-sans-strong:     "Söhne Halbfett",  "Inter", system-ui, sans-serif;
  --font-sans-heavy:      "Söhne Kräftig",   "Inter", system-ui, sans-serif;
  --font-mono:            "Söhne Mono Buch", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono-medium:     "Söhne Mono Halbfett", ui-monospace, "SF Mono", Menlo, monospace;
  --font-mono-heavy:      "Söhne Mono Kräftig",  ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------- TYPE SCALE ---------------- */
  --t-display:   104px;
  --t-h1:        64px;
  --t-h2:        40px;
  --t-h3:        28px;
  --t-h4:        22px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-label:     12px;
  --t-micro:     11px;

  /* Line-heights */
  --lh-display:  1.10;   /* ≥ 48 px */
  --lh-headline: 1.20;   /* 22–48 px */
  --lh-body:     1.55;
  --lh-label:    1.30;

  /* Tracking */
  --track-label: 0.10em;

  /* ---------------- SPACING (8px base) ---------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------------- BORDERS ---------------- */
  --hairline: 1px solid var(--ink-line);
  --rule:     1px solid var(--ink-rule);
  --radius:   0;

  /* ---------------- LAYOUT ---------------- */
  --content-max: 1280px;
  --gutter:      var(--s-7);

  /* ---------------- MOTION ---------------- */
  --motion-fast: 0.15s ease;
}

/* ---------------- GLOBAL ---------------- */

html {
  font-synthesis: none;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga";
  margin: 0;
}

/* ---------------- SEMANTIC TYPE ---------------- */
/* Size picks the cut, not the heading level. */

.t-display, .display {
  font-family: var(--font-display-hero);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display-hero);
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-5);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-headline);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-headline);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

h4, .t-h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-headline);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

.t-body-lg, .lede {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.t-body-sm {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}

.t-label, .eyebrow {
  font-family: var(--font-mono-medium);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-micro {
  font-family: var(--font-mono-medium);
  font-size: var(--t-micro);
  line-height: var(--lh-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Family swaps for emphasis (never font-weight, never font-style) */
strong, b {
  font-family: var(--font-sans-strong);
  font-weight: normal;
}
em, i, cite {
  font-family: var(--font-display-italic);
  font-style: normal;
}

/* Mono numerals for inline data */
.mono, code, kbd, samp, [data-tabular] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}

/* Hairlines */
hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--s-6) 0;
}

/* Links: Hydro, never visited-dim (engineers re-read) */
a {
  color: var(--hydro);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-fast);
}
a:hover { color: var(--hydro-deep); }
a:visited { color: var(--hydro); }

/* Focus: 2px Hydro outline at 2px offset. Mandatory. */
:focus-visible {
  outline: 2px solid var(--hydro);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--rain);
  color: var(--ink);
}