/* ============================================================
   DESIGN TOKENS — LIKAZOO Wedding Barn — the single source of cohesion.
   Change a value here and it ripples through every cell.

   SOURCE ATTESTATION: this file is seeded byte-faithfully from
     (1) 3-Design/1--Mockups/1--Style_Tile/tile.html  (the gaveled tile)
     (2) 3-Design/DESIGN.md  §"Machine-readable token block"
   The canonical brand tokens (base/accent/support/radius/fonts/type-ramp)
   are copied verbatim from those two sources. The supporting ramps below
   are DERIVED from them with the care of 01--BUILD_SCAFFOLD §2:
   light-led warm-paper family + a clay -deep/-soft/-tint quartet +
   a Meadow-Ink dark family for anchor fields and body ink.

   This file has TWO regions:
     1) EDIT PER CLIENT  — the whole re-skin surface (palette + fonts + radius).
     2) STRUCTURAL       — type scale, spacing, layout, motion. FROZEN
        (copied verbatim from _starter/css/tokens.css).
   ============================================================ */
:root {

  /* ╔══════════════════════════════════════════════════════════╗
     ║  ===== EDIT PER CLIENT =====                             ║
     ║  The swap surface. This block + the Google Fonts <link>  ║
     ║  in index.html + the images in assets/ = the whole skin. ║
     ╚══════════════════════════════════════════════════════════╝ */

  /* ── CANONICAL BRAND TOKENS (verbatim from DESIGN.md + tile.html) ── */

  /* palette — base · accent · support */
  --base:    #F5EFE5;   /* Hearth Paper — dominant light canvas / invitation ground */
  --accent:  #A86147;   /* Barn Ribbon clay — CTA, seam, proof label, accent words */
  --support: #4E6257;   /* Meadow Ink green — copy, anchors, dark fields, calm depth */

  /* radius */
  --radius:  16px;      /* softened stationery / vellum-card corners */

  /* type ramp — exactly 3 sizes: hero / section / mini */
  --font-display: 'Libre Caslon Display', serif;
  --font-body:    'Manrope', sans-serif;
  --step-hero:    clamp(3.6rem, 7vw, 6.8rem);
  --step-section: clamp(2.15rem, 3.5vw, 3.85rem);
  --step-mini:    clamp(1.1rem, 1.2vw, 1.45rem);

  /* ── DERIVED SUPPORTING RAMPS (from the 3 brand hexes, tile-consistent) ── */

  /* Meadow-Ink DARK family — the anchor fields (signature / close) and body ink.
     A deep-green ramp derived from --support #4E6257 (light-led: green owns DEPTH,
     never a global wash). These re-point the structural --ink-* slots that base.css
     and motion.css reference, so data-bg="ink"/"ink-2" render as Meadow-Ink fields. */
  --ink-900: #33413A;   /* deepest Meadow-Ink — anchor / close canvas */
  --ink-850: #3B4A42;   /* subtle internal shift within a green anchor run */
  --ink-800: #45564C;   /* raised dark surfaces / cards on green */
  --ink-700: #526458;   /* seams / borders on green (near --support) */
  --slate-600: #6E7E74;
  --slate-500: #8A988E;
  --slate-400: #A8B4AB; /* muted text on the green anchor field */
  --slate-300: #C6CFC8;

  /* Light "breath" surfaces — the warm Hearth-Paper family (tile.html ground).
     --marble-50 is the primary breath; --cream the secondary (e.g. FAQ/date card). */
  --paper-100: #FBF7F1; /* lifted paper (tile.html top gradient stop) */
  --paper-0:   #FFFFFF; /* card veil / brightest lift */
  --marble-50: #F5EFE5; /* = Hearth Paper — primary light breath surface */
  --marble-100:#EDE6D9; /* soft paper shade for layered cards */
  --cream:     #F0E9DD; /* secondary light surface (date-check / FAQ ground) */
  --stone-200: #E1D8CA; /* light borders on paper */
  --stone-500: #8B7E6D; /* muted text on paper (tile --ink-soft family) */
  --stone-700: #5A4A3D; /* deep warm ink for body text on paper */

  /* ACCENT — Barn Ribbon clay quartet. The 1-variable regrip/action swap:
     base, hover/active (deeper), tint (lighter), and a translucent wash.
     base.css / motion.css reference the --terracotta* slot names, so they are
     re-pointed to the clay values here (kept as the structural accent slots). */
  --terracotta:      #A86147;             /* = Barn Ribbon clay — base action colour */
  --terracotta-deep: #8C4F39;             /* hover / active (deeper clay) */
  --terracotta-soft: #C68B71;             /* tints / soft clay */
  --terracotta-tint: rgba(168, 97, 71, 0.12); /* translucent wash */

  /* Friendly aliases (same values, brand-named) for cell authors. */
  --clay:      var(--terracotta);
  --clay-deep: var(--terracotta-deep);
  --clay-soft: var(--terracotta-soft);
  --clay-tint: var(--terracotta-tint);
  --meadow:    var(--support);

  /* — FONTS — the two family vars match the Google Fonts <link> in index.html. */
  --font-display-alt-1: 'Libre Caslon Display', Georgia, 'Times New Roman', serif; /* optional spare */
  --font-display-alt-2: 'Libre Caslon Display', Georgia, serif;                     /* optional spare */

  /* ╔══════════════════════════════════════════════════════════╗
     ║  ===== END PER CLIENT — everything below is STRUCTURAL ===  ║
     ╚══════════════════════════════════════════════════════════╝ */


  /* ╔══════════════════════════════════════════════════════════╗
     ║  ===== STRUCTURAL — DO NOT EDIT =====                    ║
     ║  Copied verbatim from _starter/css/tokens.css. Proportion,║
     ║  rhythm, motion feel — brand-agnostic.                    ║
     ╚══════════════════════════════════════════════════════════╝ */

  /* — Semantic text aliases — STRUCTURAL aliases that POINT AT the
       per-client palette above. The aliases are frozen; their targets
       re-skin automatically when you edit the palette. Don't rename.
       (on-dark = on the Meadow-Ink anchor field; on-light = on Hearth Paper.) */
  --font-sans: var(--font-body);
  --text-on-dark: #F5EFE5;            /* warm paper on the green anchor field */
  --text-on-dark-muted: var(--slate-400);
  --text-on-light: var(--stone-700);
  --text-on-light-muted: var(--stone-500);
  /* Brand-named semantic aliases (per DESIGN.md: text-on-paper = Meadow Ink). */
  --text-on-paper: var(--support);
  --text-on-paper-muted: var(--stone-500);

  /* — Fluid type scale — clamp(min, fluid, max). The typographic rhythm. */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem);  /* body */
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);
  --step-5:  clamp(3.1rem, 2rem + 5.4vw, 6.25rem);       /* hero display */

  --tracking-label: 0.2em;   /* uppercase eyebrows / labels */
  --leading-display: 0.98;
  --leading-body: 1.62;

  /* — Spacing (fluid rhythm) — */
  --space-2xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);
  --space-s:   clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
  --space-m:   clamp(1.25rem, 1rem + 1vw, 1.85rem);
  --space-l:   clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --space-xl:  clamp(3rem, 2rem + 4vw, 5.5rem);
  --section-pad-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* section vertical breathing */
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);   /* page side padding */
  --measure: 64ch;     /* readable line length */
  --maxw: 1280px;
  --maxw-wide: 1560px;

  /* — Motion — brand-agnostic timing/easing. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 0.35s;
  --dur: 0.6s;
  --dur-slow: 1s;

  /* — Misc structural — */
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --hairline-dark: rgba(78, 98, 87, 0.14);   /* Meadow-Ink hairline on paper (tile --paper-line) */
  --nav-h: 4.75rem;
}