/* ============================================================
   TERRAFORM THEME — design tokens (compiled)
   Sources: tokens/{colors,typography,spacing,effects,base}.css
   Fonts are enqueued separately (Google Fonts) in inc/enqueue.php.
   ============================================================ */

/* ============================================================
   TERRAFORM — COLOR TOKENS  (v2 · dark-first, earthy-editorial)
   ------------------------------------------------------------
   Four anchors, drawn from the brand reference palette:
     Inkwell        #2C3639  — cool dark teal-charcoal (base neutral)
     Lunar Eclipse  #3F4E4F  — muted sage-slate (raised surface / muted)
     Creme Brulee   #A27B5B  — warm caramel (the brand accent)
     Au Lait        #DCD7C9  — warm oat cream (primary text on dark)
   The system is DARK by default: deep ink surfaces, cream type,
   caramel as the single warm brand pop. Cool sage + warm caramel
   are the accent family.
   ============================================================ */
:root {
  /* ---- Ink (cool teal-charcoal — the base neutral / dark surfaces) ---- */
  --ink-950: #151b1c;   /* deepest — page background */
  --ink-900: #1b2324;
  --ink-800: #222b2c;
  --ink-700: #2c3639;   /* ANCHOR · Inkwell — raised surface / cards */
  --ink-600: #384446;
  --ink-500: #475456;
  --ink-400: #5c696b;

  /* ---- Slate (Lunar Eclipse — muted sage-slate; borders & muted text) ---- */
  --slate-800: #2f3b3a;
  --slate-700: #3f4e4f;  /* ANCHOR · Lunar Eclipse */
  --slate-600: #4d5c5c;
  --slate-500: #607070;
  --slate-400: #7d8b8a;
  --slate-300: #9ca9a7;  /* muted text on dark */
  --slate-200: #bcc6c4;

  /* ---- Caramel (Creme Brulee — the warm brand accent) ---- */
  --caramel-200: #d7bfa6;
  --caramel-300: #c8a988;
  --caramel-400: #b5926e;
  --caramel-500: #a27b5b;  /* ANCHOR · Creme Brulee — BRAND accent */
  --caramel-600: #866444;
  --caramel-700: #684d35;

  /* ---- Oat (Au Lait — warm cream; text on dark, light surfaces) ---- */
  --oat-50:  #faf8f2;
  --oat-100: #f1eee4;
  --oat-200: #dcd7c9;  /* ANCHOR · Au Lait */
  --oat-300: #c6c0af;
  --oat-400: #a8a291;

  /* ---- Functional hues (harmonised, muted to fit the palette) ---- */
  --sage-500:  #6f8a6a;   /* success — a natural green */
  --sage-600:  #5a7256;
  --amber-500: #c19246;   /* warning — warm gold, sibling of caramel */
  --rust-500:  #b0553a;   /* danger — kiln-fired terracotta */
  --rust-600:  #92442d;
  --loch-500:  #4d7377;   /* info — muted teal water */

  /* ============ SEMANTIC ALIASES (dark theme) ============ */
  /* Brand */
  --brand:          var(--caramel-500);
  --brand-hover:    var(--caramel-400);
  --brand-active:   var(--caramel-600);
  --brand-subtle:   color-mix(in oklab, var(--caramel-500) 16%, var(--ink-900));
  --brand-on:       #201812;        /* dark ink text on a caramel fill */
  --accent-warm:    var(--caramel-500);
  --accent-cool:    var(--slate-400);

  /* Text (on dark) */
  --text-strong:   var(--oat-100);
  --text-body:     var(--oat-200);
  --text-muted:    var(--slate-300);
  --text-faint:    var(--slate-400);
  --text-on-brand: var(--brand-on);
  --text-brand:    var(--caramel-300);
  --text-link:     var(--caramel-300);

  /* Surfaces */
  --surface-page:    var(--ink-950);   /* deep page base */
  --surface-card:    var(--ink-800);
  --surface-raised:  var(--ink-700);   /* Inkwell — elevated cards/panels */
  --surface-sunken:  var(--ink-900);
  --surface-slate:   var(--slate-700); /* secondary tinted panel */
  --surface-inverse: var(--oat-100);   /* rare light section */
  --surface-brand:   var(--caramel-500);

  /* Lines */
  --border:        color-mix(in oklab, var(--slate-400) 26%, transparent);
  --border-strong: color-mix(in oklab, var(--slate-400) 46%, transparent);
  --border-brand:  var(--caramel-500);
  --divider:       color-mix(in oklab, var(--slate-400) 20%, transparent);

  /* States */
  --success: var(--sage-500);
  --warning: var(--amber-500);
  --danger:  var(--rust-500);
  --info:    var(--loch-500);

  /* Focus ring */
  --focus-ring: color-mix(in oklab, var(--caramel-400) 60%, transparent);

  /* On-light overrides — for the rare inverse (Au Lait) section.
     Wrap such a section in [data-theme="light"] to flip text/surfaces. */
}

[data-theme="light"] {
  --surface-page:   var(--oat-100);
  --surface-card:   var(--oat-50);
  --surface-raised: #ffffff;
  --surface-sunken: var(--oat-200);
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-800);
  --text-muted:     var(--slate-600);
  --text-faint:     var(--slate-500);
  --text-brand:     var(--caramel-600);
  --text-link:      var(--caramel-600);
  --border:         color-mix(in oklab, var(--ink-700) 16%, transparent);
  --border-strong:  color-mix(in oklab, var(--ink-700) 30%, transparent);
  --divider:        color-mix(in oklab, var(--ink-700) 12%, transparent);
  --brand-subtle:   color-mix(in oklab, var(--caramel-500) 18%, var(--oat-100));
}

/* ============================================================
   LEGACY COMPATIBILITY  (v1 → v2)
   The old moss/olive/stone/loch/sand/terra ramps are still
   referenced by the component library and older cards. Rather
   than break them, we alias every legacy name onto the new
   dark-first anchors so existing components render in the new
   palette. NEW work should use the v2 tokens above; these
   aliases are a migration bridge, not a target.
   ============================================================ */
:root {
  /* moss (old brand green) → caramel (new brand) */
  --moss-50:  color-mix(in oklab, var(--caramel-500) 10%, var(--ink-900));
  --moss-100: color-mix(in oklab, var(--caramel-500) 18%, var(--ink-900));
  --moss-200: var(--caramel-200);
  --moss-300: var(--caramel-300);
  --moss-400: var(--caramel-300);
  --moss-500: var(--caramel-500);
  --moss-600: var(--caramel-400);
  --moss-700: var(--caramel-300);
  --moss-800: var(--caramel-200);
  --moss-900: var(--caramel-700);

  /* olive (old dark ink) → ink / slate */
  --olive-400: var(--slate-400);
  --olive-500: var(--slate-400);
  --olive-600: var(--slate-300);
  --olive-700: var(--slate-300);
  --olive-800: var(--ink-800);
  --olive-900: var(--ink-900);

  /* stone (old warm grey) → ink surfaces / slate lines & muted text */
  --stone-50:  var(--ink-900);
  --stone-100: var(--ink-800);
  --stone-200: color-mix(in oklab, var(--slate-400) 26%, transparent);
  --stone-300: var(--slate-600);
  --stone-400: var(--slate-400);
  --stone-500: var(--slate-400);
  --stone-600: var(--slate-500);
  --stone-700: var(--slate-600);
  --stone-800: var(--slate-700);
  --stone-900: var(--ink-900);

  /* loch (water) → keep teal; supply the tints components use */
  --loch-100: color-mix(in oklab, var(--loch-500) 26%, var(--ink-900));
  --loch-300: #7ba7ae;
  --loch-600: #3f5f63;
  --loch-700: var(--slate-200);

  /* sand (contour) → caramel family */
  --sand-100: color-mix(in oklab, var(--caramel-500) 18%, var(--ink-900));
  --sand-300: var(--caramel-300);
  --sand-500: var(--caramel-500);
  --sand-700: var(--caramel-200);

  /* terra (danger) → rust */
  --terra-100: color-mix(in oklab, var(--rust-500) 22%, var(--ink-900));
  --terra-500: var(--rust-500);
  --terra-600: var(--rust-500);
}


/* ============================================================
   TERRAFORM — TYPOGRAPHY TOKENS
   Display: Archivo (grotesque, bold, cartographic wordmark feel)
   Body:    Hanken Grotesk (warm humanist companion)
   Mono:    Archivo Condensed, Archivo at 75% width (coordinates, data, labels)
   ============================================================ */
:root {
  --font-display: 'Archivo', 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'Archivo', system-ui, sans-serif;
  --mono-stretch: 75%; /* Archivo on its width axis = the condensed data voice */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */

  /* Type scale — 1.25 major-third, tuned for wall-map warmth */
  --text-2xs: 0.6875rem;  /* 11px — mono micro-labels */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-base:1rem;       /* 16px */
  --text-md:  1.125rem;   /* 18px */
  --text-lg:  1.375rem;   /* 22px */
  --text-xl:  1.75rem;    /* 28px */
  --text-2xl: 2.25rem;    /* 36px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4rem;       /* 64px */
  --text-5xl: 5.5rem;     /* 88px — hero display */

  /* Line heights */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.66;

  /* Letter spacing */
  --tracking-tighter: -0.03em;  /* big display headings */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;    /* eyebrow / tagline mono */
  --tracking-widest:  0.22em;
}

/* ---- Semantic text roles (utility classes) ---- */
.tf-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-strong);
}
.tf-h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.tf-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--text-strong); }
.tf-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--text-strong); }
.tf-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text-strong); }
.tf-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); }
.tf-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); }
.tf-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }

/* Eyebrow — the site's letter-spaced section kicker ("OUR COLLECTION") */
.tf-eyebrow {
  font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%);
  font-weight: var(--fw-regular);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-brand);
}
/* Data — geological stats, coordinates, prices in mono */
.tf-data {
  font-family: var(--font-mono); font-stretch: var(--mono-stretch, 75%);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}


/* ============================================================
   TERRAFORM — SPACING & LAYOUT TOKENS  (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 — section rhythm */
  --space-14: 9rem;     /* 144 */

  /* Container widths */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1140px;
  --container-xl:  1320px;

  /* Section vertical padding */
  --section-y:      var(--space-12);
  --section-y-tight:var(--space-9);

  /* Grid gutter */
  --gutter: var(--space-5);
}


/* ============================================================
   TERRAFORM — EFFECTS: radii, shadows, borders, motion
   The brand is tactile & organic (vacuum-formed relief, pebble
   mark). Radii are soft; shadows are low, warm, olive-tinted —
   like an object resting on a wall, never a glossy web card.
   ============================================================ */
:root {
  /* Corner radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-pill: 999px;
  --radius-organic: 42% 58% 55% 45% / 55% 42% 58% 45%; /* pebble blob */

  /* Shadows — warm olive-grey, soft, grounded */
  --shadow-xs:  0 1px 2px rgba(38, 37, 26, 0.06);
  --shadow-sm:  0 2px 6px rgba(38, 37, 26, 0.07);
  --shadow-md:  0 6px 18px -6px rgba(38, 37, 26, 0.16);
  --shadow-lg:  0 18px 40px -14px rgba(38, 37, 26, 0.22);
  --shadow-xl:  0 30px 70px -20px rgba(38, 37, 26, 0.28);
  /* "Wall-hung" cast — the shadow behind a framed relief map */
  --shadow-hung: 0 24px 48px -20px rgba(38, 37, 26, 0.34);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* Borders */
  --border-width: 1px;
  --border-hair: 1px solid var(--border);
  --border-card: 1px solid var(--stone-200);

  /* Focus */
  --focus-width: 3px;

  /* Motion — calm, geological. Ease out, no bounce. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* Elevation surfaces */
  --ring-focus: 0 0 0 var(--focus-width) var(--focus-ring);
}


/* ============================================================
   TERRAFORM — base element defaults + helpers.
   Light-touch: sets the warm paper canvas, body type, links,
   selection, focus-visible, and a couple of brand utilities
   (the contour hairline motif, topographic backdrop).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--caramel-300); color: var(--ink-900); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--caramel-200); text-decoration: underline; text-underline-offset: 3px; }

:where(button, a, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

h1,h2,h3,h4 { font-family: var(--font-display); color: var(--text-strong); margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

/* ---------- Brand utilities ---------- */

/* Contour hairline — a single topographic stroke used as a divider */
.tf-contour-rule {
  height: 2px; border: 0;
  background:
    repeating-linear-gradient(90deg,
      var(--caramel-500) 0 22px, transparent 22px 30px);
  opacity: 0.6;
}

/* Topographic backdrop — faint stacked contour rings, for hero/section fills */
.tf-topo-bg {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(120% 120% at 78% 12%, color-mix(in oklab, var(--caramel-500) 12%, transparent) 0%, transparent 55%),
    repeating-radial-gradient(circle at 82% 14%,
      transparent 0 26px,
      color-mix(in oklab, var(--slate-400) 12%, transparent) 26px 27px,
      transparent 27px 54px);
}

/* Light section on Au Lait cream — the rare inverse block */
.tf-section-light {
  background: var(--oat-100);
  color: var(--ink-800);
}
.tf-section-light h1,.tf-section-light h2,.tf-section-light h3 { color: var(--ink-900); }

.tf-container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-5); }