/* ============================================================
   THE PRESSROOM — Design Tokens v3
   Front Nine Press · tokens.css
   Load this before site.css.
   ============================================================ */

/* ── 1. COLOR SCALES ──────────────────────────────────────── */
:root {
  /* Base brand palette */
  --pine-0:  #060f0c;
  --pine-1:  #0f1d18;   /* canvas base */
  --pine-2:  #14261f;
  --pine-3:  #1d3329;
  --pine-4:  #2a4a3a;
  --cream-0: #f4ead8;   /* primary text */
  --cream-1: #e8dcc4;
  --cream-2: #cfc5ae;   /* dim text */
  --cream-3: #b0a48e;
  --cream-4: #776e5a;
  --gold-0:  #f0d078;
  --gold-1:  #c9a84c;   /* primary accent */
  --gold-2:  #a07e2e;
  --gold-3:  #7a5f1c;
  --rust-0:  #e89060;
  --rust-1:  #c8702a;
  --rust-2:  #9e5218;
  --sage-0:  #b0c4b1;
  --sage-1:  #8ea88f;
  --sage-2:  #5f7a60;
  --ink:     #2a3a35;

  /* Semantic roles (default = golf/clubhouse) */
  --canvas:       var(--pine-1);
  --canvas-raised: var(--pine-2);
  --canvas-tint:  var(--pine-2);
  --text:         var(--cream-0);
  --text-dim:     var(--cream-2);
  --accent:       var(--gold-1);
  --accent-dark:  var(--gold-2);
  --accent-2:     var(--rust-1);
  --accent-3:     var(--sage-1);
  --hero-wash:    rgba(15, 29, 24, 0.72);
  --border:       rgba(244, 234, 216, 0.10);
  --border-accent: rgba(201, 168, 76, 0.40);
  --glow:         rgba(201, 168, 76, 0.18);
}

/* ── 2. COLLECTION THEMING ────────────────────────────────── */
/* Golf — Clubhouse Heritage (default, mirrors :root above)  */
[data-collection="golf"] {
  --canvas-tint:   #162219;
  --accent:        #c9a84c;   /* brass */
  --accent-2:      #6e2f2a;   /* oxblood */
  --accent-3:      var(--sage-1);
  --hero-wash:     rgba(15, 29, 24, 0.76);
  --glow:          rgba(201, 168, 76, 0.20);
}

/* Ski — Alpine Modern */
[data-collection="ski"] {
  --canvas:        #0b1520;
  --canvas-raised: #0d1b26;
  --canvas-tint:   #0d1b26;   /* glacier navy */
  --text:          #e8f2f8;
  --text-dim:      #8fb4c8;
  --accent:        #a8c7d8;   /* ice blue */
  --accent-dark:   #6fa3bd;
  --accent-2:      #3fa38a;   /* aurora */
  --accent-3:      #b0764a;   /* cedar */
  --hero-wash:     rgba(11, 21, 32, 0.74);
  --border:        rgba(168, 199, 216, 0.12);
  --border-accent: rgba(168, 199, 216, 0.35);
  --glow:          rgba(168, 199, 216, 0.15);
}

/* Parks — Ranger Station */
[data-collection="parks"] {
  --canvas:        #111308;
  --canvas-raised: #1a1c14;
  --canvas-tint:   #1a1c14;   /* dark khaki */
  --text:          #f0eacc;
  --text-dim:      #b8ad8a;
  --accent:        #d08b3c;   /* ochre */
  --accent-dark:   #a06620;
  --accent-2:      #4a6b4f;   /* forest */
  --accent-3:      #c8b87a;
  --hero-wash:     rgba(17, 19, 8, 0.75);
  --border:        rgba(240, 234, 204, 0.10);
  --border-accent: rgba(208, 139, 60, 0.38);
  --glow:          rgba(208, 139, 60, 0.18);
}

/* ── 3. TYPOGRAPHY SCALE ──────────────────────────────────── */
:root {
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-serif:   "Playfair Display", Georgia, serif;
  --font-ui:      Inter, system-ui, sans-serif;
  --font-caps:    Oswald, Inter, sans-serif;

  /* Fluid type — clamp(min, preferred, max) */
  --fs-2xs: clamp(0.625rem,  0.58rem  + 0.18vw, 0.6875rem);   /*  10–11px */
  --fs-xs:  clamp(0.6875rem, 0.65rem  + 0.22vw, 0.75rem);     /*  11–12px */
  --fs-sm:  clamp(0.75rem,   0.72rem  + 0.28vw, 0.875rem);    /*  12–14px */
  --fs-md:  clamp(0.9375rem, 0.88rem  + 0.36vw, 1rem);        /*  15–16px */
  --fs-lg:  clamp(1rem,      0.96rem  + 0.5vw,  1.1875rem);   /*  16–19px */
  --fs-xl:  clamp(1.25rem,   1.1rem   + 0.8vw,  1.625rem);    /*  20–26px */
  --fs-2xl: clamp(1.625rem,  1.4rem   + 1.3vw,  2.25rem);     /*  26–36px */
  --fs-3xl: clamp(2rem,      1.6rem   + 2.2vw,  3rem);        /*  32–48px */
  --fs-4xl: clamp(2.5rem,    1.9rem   + 3vw,    4rem);        /*  40–64px */
  --fs-5xl: clamp(3.25rem,   2.4rem   + 4.2vw,  5.5rem);      /*  52–88px */
  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;
  --ls-wide:   0.14em;
  --ls-wider:  0.20em;
  --ls-tight:  0.02em;
}

/* ── 4. SPACING SCALE ─────────────────────────────────────── */
:root {
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   32px;
  --sp-8:   40px;
  --sp-9:   48px;
  --sp-10:  64px;
  --sp-11:  80px;
  --sp-12:  96px;
  --sp-13:  128px;
  --maxw:   1180px;
  --maxw-prose: 720px;
  --maxw-narrow: 540px;
}

/* ── 5. RADII ─────────────────────────────────────────────── */
:root {
  --rad-sm:  6px;
  --rad:     14px;
  --rad-lg:  20px;
  --rad-xl:  28px;
  --rad-pill:9999px;
}

/* ── 6. SHADOWS (layered, dramatic) ──────────────────────────*/
:root {
  --shadow-sm:
    0 1px 2px rgba(0,0,0,.35),
    0 1px 4px rgba(0,0,0,.18);
  --shadow-md:
    0 4px 8px  rgba(0,0,0,.38),
    0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:
    0 8px 16px  rgba(0,0,0,.40),
    0 20px 48px rgba(0,0,0,.32),
    0 40px 80px rgba(0,0,0,.22);
  --shadow-poster:
    0 12px 24px rgba(0,0,0,.45),
    0 30px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(244,234,216,.06);
  --shadow-glow:
    0 0 0 1px var(--border-accent),
    0 8px 32px var(--glow);
  --shadow-inset:
    inset 0 1px 0 rgba(244,234,216,.06),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

/* ── 7. Z-INDEX SCALE ─────────────────────────────────────── */
:root {
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
}

/* ── 8. MOTION ────────────────────────────────────────────── */
:root {
  --ease-press:  cubic-bezier(.22, 1, .36, 1);   /* expressive decel */
  --ease-in:     cubic-bezier(.4,  0, 1,  1);
  --ease-out:    cubic-bezier(0,   0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:    120ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;
  --dur-slower:  650ms;
  --dur-marquee: 48s;
}

/* ── 9. TEXTURE UTILITIES ─────────────────────────────────── */
/* Subtle SVG noise — applied as overlay, not background */
.tx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.tx-grain { position: relative; }

/* Fine crosshatch linen */
.tx-linen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0 L6 6 M6 0 L0 6' stroke='%23f4ead8' stroke-width='.4'/%3E%3C/svg%3E");
  background-size: 6px 6px;
}
.tx-linen { position: relative; }

/* Halftone dot pattern */
.tx-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23f4ead8'/%3E%3C/svg%3E");
  background-size: 8px 8px;
}
.tx-halftone { position: relative; }