/* ============================================================
   CASSAVONA v2 — Design Tokens
   Heritage print-shop: Libre Caslon · Archivo · Space Mono.
   Fluid spacing/type so margins read correctly at EVERY width.
   ============================================================ */
@layer tokens, base, layout, components, sections, motion;

@layer tokens {
  :root {
    /* ---- Color: warm paper + espresso ink + heritage accents ---- */
    --c-paper:#F2ECE0;  --c-paper-2:#E4D8C3;  --c-paper-3:#D9CCB2;
    --c-ink:#211E1A;    --c-ink-2:#26221E;    --c-ink-3:#3A342D;
    --c-rust:#B0532C;   --c-rust-2:#9A4526;   --c-terracotta:#CF7A4F;
    --c-olive:#6B7355;  --c-slate:#5C748C;    --c-gold:#C99A3F;

    --tier-base:#211E1A; --tier-pro:#B0532C; --tier-elite:#5C748C; --tier-brokerage:#6B7355;

    --text-on-paper:#211E1A;  --text-on-paper-soft:#6B5E4A;  --text-body:#3C322A;
    --text-on-ink:#F2ECE0;    --text-on-ink-soft:#9A8C78;
    --btn-label:#F2ECE0;

    --hair:#211E1A;                       /* solid ink hairline (keylines/borders) */
    --line-soft:#CBBDA3;                  /* soft rule on paper */
    --line-on-paper:rgba(33,30,26,.16);
    --line-on-ink:rgba(242,236,224,.18);
    --shadow-card:0 1px 2px rgba(33,30,26,.05), 0 10px 30px rgba(33,30,26,.08);
    --shadow-lift:0 2px 6px rgba(33,30,26,.10), 0 22px 48px rgba(33,30,26,.16);
    --focus:#B0532C;

    /* ---- Fluid spacing ladder ---- */
    --space-1:clamp(.25rem,.23rem + .10vw,.31rem);
    --space-2:clamp(.50rem,.46rem + .21vw,.63rem);
    --space-3:clamp(.75rem,.68rem + .31vw,.94rem);
    --space-4:clamp(1rem,.91rem + .42vw,1.25rem);
    --space-5:clamp(1.5rem,1.36rem + .63vw,1.88rem);
    --space-6:clamp(2rem,1.78rem + .94vw,2.5rem);
    --space-7:clamp(2.5rem,2.17rem + 1.46vw,3.5rem);
    --space-8:clamp(3rem,2.5rem + 2.08vw,4.5rem);
    --space-9:clamp(4rem,3.17rem + 3.33vw,6rem);
    --space-10:clamp(4.5rem,3.5rem + 4.2vw,7rem);
    --space-11:clamp(6rem,4.33rem + 6.25vw,10rem);
    --space-12:clamp(7rem,4.83rem + 7.92vw,12rem);

    --gutter:clamp(1.25rem,.7rem + 3.4vw,2.5rem);
    --container:73.75rem;       /* 1180px — matches mockup */
    --section-y:var(--space-9);
    --stack:var(--space-5);
    --card-pad:var(--space-5);
    --nav-h:clamp(3.5rem,3.1rem + 1.6vw,4.25rem);

    /* ---- Fluid type scale ---- */
    /* Fluid type — clamp(MIN_rem, rem + vw, MAX_rem). rem anchors keep it
       accessible (respects browser font-size); vw makes it scale fluidly.
       Mobile minimums tuned for legibility: body ≥16px, no label under 12px. */
    --fs-display:clamp(2.75rem,1.4rem + 6vw,5.5rem);
    --fs-h1:clamp(2.25rem,1.45rem + 3.7vw,3.9rem);
    --fs-h2:clamp(1.875rem,1.4rem + 2.1vw,2.75rem);
    --fs-h3:clamp(1.375rem,1.18rem + .9vw,1.75rem);
    --fs-lead:clamp(1.125rem,1.04rem + .4vw,1.3125rem);
    --fs-body:clamp(1rem,.94rem + .32vw,1.125rem);
    --fs-small:clamp(.875rem,.84rem + .18vw,.9375rem);
    --fs-mono:clamp(.75rem,.72rem + .14vw,.8125rem);
    --fs-caption:clamp(.6875rem,.66rem + .1vw,.75rem);

    --ff-display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
    --ff-italic:"Libre Caslon Text",Georgia,serif;
    --ff-body:"Archivo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --ff-mono:"Space Mono","Courier New",ui-monospace,monospace;

    --lh-display:1.03; --lh-head:1.1; --lh-body:1.62;
    --tracking-label:.12em; --tracking-wide:.06em;
    --measure:62ch; --measure-narrow:46ch;

    --radius:0px; --radius-sm:0px; --radius-pill:999px;
    --keyline-pad:clamp(5px,1vw,9px);

    /* ---- Motion: harvested easings + durations ---- */
    --ease:cubic-bezier(.22,1,.36,1);          /* soft expo-out (reveals/clip) */
    --ease-veil:cubic-bezier(.83,0,.17,1);     /* expo-in-out (wipes/loader) */
    --ease-spring:cubic-bezier(.22,1,.30,1.02);/* slight overshoot (settle) */
    --t-fast:160ms; --t:280ms; --t-slow:560ms; --t-reveal:840ms; --t-cross:1100ms;
    --z-veil:200; --z-nav:50; --z-menu:60; --z-skip:300;

    /* ---- Heritage devices ---- */
    --weave:repeating-linear-gradient(90deg,
      var(--c-rust) 0 24px, var(--c-olive) 24px 48px,
      var(--c-slate) 48px 72px, var(--c-gold) 72px 96px);
    --hatch:repeating-linear-gradient(45deg,
      var(--c-paper) 0 13px, var(--c-paper-3) 13px 26px);
  }
}