/* ============================================================
   THE BACKSWING — DESIGN TOKENS
   Hidden speakeasy at the back of Playground Mini Golf, HB.
   Sister to Playground (cream + forest green, daytime/family).
   Backswing is the after-hours counterpart: ink, oxblood, brass.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Great+Vibes&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── BRAND PALETTE ─────────────────────────────────────────
     Diverges from Playground (cream-dominant) by leading with
     ink and oxblood. Forest green stays as the family marker.
  ─────────────────────────────────────────────────────────── */

  /* Primary surfaces — moody, after-hours */
  --bs-ink:           #0E0E0C;   /* near-black, primary surface */
  --bs-ink-soft:      #181815;   /* card / second surface */
  --bs-ink-raised:    #22221E;   /* tertiary, dividers */
  --bs-forest:        #1A3A2E;   /* family color (from figma 215× use) */
  --bs-forest-deep:   #0F2419;   /* darker forest, pressed states */
  --bs-oxblood:       #6B1A22;   /* brand accent — wine/red, used sparingly */
  --bs-oxblood-deep:  #4A0F18;

  /* Brass — luxury accent (figma's bronze gold #9B7E3C, slightly tuned) */
  --bs-brass:         #B89456;   /* lighter for dark surfaces */
  --bs-brass-base:    #9B7E3C;   /* base bronze (figma) */
  --bs-brass-deep:    #6F5826;

  /* Cream — now used as text-on-dark, not background */
  --bs-cream:         #F5EFE7;   /* warm off-white, candlelit */
  --bs-cream-soft:    #E8DFD0;
  --bs-sand:          #D4C4B0;   /* secondary neutral, from figma */

  /* Cream-with-alpha for hierarchy on dark */
  --bs-cream-90:      rgba(245,239,231,0.90);
  --bs-cream-70:      rgba(245,239,231,0.70);
  --bs-cream-50:      rgba(245,239,231,0.50);
  --bs-cream-30:      rgba(245,239,231,0.30);
  --bs-cream-15:      rgba(245,239,231,0.15);
  --bs-cream-08:      rgba(245,239,231,0.08);

  /* Semantic */
  --bs-success:       #4F7A4A;
  --bs-warning:       #B89456;
  --bs-danger:        #6B1A22;

  /* ── FOREGROUND / BACKGROUND TOKENS ───────────────────────
     Convention: dark-mode-first. Light surfaces are inverted.
  ─────────────────────────────────────────────────────────── */
  --bg-1: var(--bs-ink);
  --bg-2: var(--bs-ink-soft);
  --bg-3: var(--bs-ink-raised);
  --bg-forest: var(--bs-forest);
  --bg-cream: var(--bs-cream);

  --fg-1: var(--bs-cream);          /* primary text on dark */
  --fg-2: var(--bs-cream-70);       /* secondary text on dark */
  --fg-3: var(--bs-cream-50);       /* tertiary / meta on dark */
  --fg-brass: var(--bs-brass);
  --fg-on-cream-1: var(--bs-forest);
  --fg-on-cream-2: rgba(26,58,46,0.70);
  --fg-on-cream-3: rgba(26,58,46,0.50);

  --hairline: rgba(245,239,231,0.18);
  --hairline-strong: rgba(245,239,231,0.32);
  --hairline-brass: rgba(184,148,86,0.55);
  --hairline-on-cream: rgba(26,58,46,0.18);

  /* ── TYPE FAMILIES ────────────────────────────────────── */
  --font-display: "Instrument Serif", "Cormorant Garamond", "Times New Roman", serif;
  --font-script:  "Great Vibes", "Allura", cursive;
  --font-body:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── TYPE SCALE ───────────────────────────────────────────
     Display sizes are LARGE — speakeasies whisper, but their
     wordmarks shout. Body is comfortable for low-light reading.
  ─────────────────────────────────────────────────────────── */
  --t-display-1: 96px;   /* hero wordmark */
  --t-display-2: 72px;   /* page titles */
  --t-display-3: 56px;   /* section heads */
  --t-display-4: 40px;
  --t-display-5: 32px;

  --t-script-1: 88px;    /* "The" decorative */
  --t-script-2: 56px;
  --t-script-3: 36px;

  --t-eyebrow:   12px;   /* UPPERCASE small caps */
  --t-meta:      13px;
  --t-body-sm:   14px;
  --t-body:      16px;
  --t-body-lg:   18px;
  --t-lead:      22px;   /* Inter italic, intros */

  /* Letter spacing */
  --ls-tight:  -0.02em;  /* large display */
  --ls-snug:   -0.01em;
  --ls-normal: 0;
  --ls-wide:    0.08em;
  --ls-wider:   0.18em;  /* eyebrows, button labels */

  /* Line heights */
  --lh-tight:    1.05;
  --lh-display:  1.10;
  --lh-snug:     1.30;
  --lh-body:     1.55;
  --lh-loose:    1.75;

  /* ── SPACING (4-px grid, candlelit room — generous) ─────── */
  --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: 56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* ── RADII ────────────────────────────────────────────────
     Speakeasy = boxy, square-ish. Soft on cards, sharp chips.
  ─────────────────────────────────────────────────────────── */
  --r-none: 0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   16px;
  --r-pill: 999px;

  /* ── BORDERS ────────────────────────────────────────────── */
  --border-hair:   1px solid var(--hairline);
  --border-strong: 1px solid var(--hairline-strong);
  --border-brass:  1px solid var(--hairline-brass);
  --border-cream:  1px solid var(--bs-cream);
  --border-rule:   1px solid var(--bs-cream-30);

  /* ── SHADOWS — candlelight, low and warm ──────────────── */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.20);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 24px 64px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(184,148,86,0.30), 0 0 32px rgba(184,148,86,0.18);
  --shadow-inner: inset 0 1px 0 rgba(245,239,231,0.06);

  /* ── MOTION ───────────────────────────────────────────────
     Slow, considered. Nothing in a speakeasy moves fast.
  ─────────────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pour:   cubic-bezier(0.25, 0.1, 0.25, 1); /* slow pour */
  --dur-quick: 140ms;
  --dur-base:  240ms;
  --dur-slow:  480ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use as: <h1 class="bs-h1">…</h1>
   ============================================================ */

.bs-display-1, .bs-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}
.bs-display-2, .bs-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-snug);
}
.bs-display-3, .bs-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-snug);
}
.bs-h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-4);
  line-height: var(--lh-snug);
}
.bs-h5 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-5);
  line-height: var(--lh-snug);
}

.bs-script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1;
}
.bs-script-1 { font-family: var(--font-script); font-size: var(--t-script-1); line-height: 1; }
.bs-script-2 { font-family: var(--font-script); font-size: var(--t-script-2); line-height: 1; }
.bs-script-3 { font-family: var(--font-script); font-size: var(--t-script-3); line-height: 1; }

.bs-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  line-height: 1;
}
.bs-meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-3);
}
.bs-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-lead);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}
.bs-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}
.bs-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}
.bs-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-body-sm);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* ============================================================
   BACKGROUND HELPERS
   ============================================================ */

.bs-surface-ink     { background: var(--bs-ink);     color: var(--fg-1); }
.bs-surface-soft    { background: var(--bs-ink-soft); color: var(--fg-1); }
.bs-surface-forest  { background: var(--bs-forest);  color: var(--fg-1); }
.bs-surface-cream   { background: var(--bs-cream);   color: var(--fg-on-cream-1); }
.bs-surface-oxblood { background: var(--bs-oxblood); color: var(--fg-1); }

/* Subtle film grain — vintage tactility */
.bs-grain {
  position: relative;
}
.bs-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Diagonal pinstripe — figma "patterns & textures" */
.bs-pinstripe {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 6px,
    var(--bs-cream-08) 6px,
    var(--bs-cream-08) 7px
  );
}

/* Halftone dot */
.bs-halftone {
  background-image: radial-gradient(var(--bs-cream-15) 1px, transparent 1.6px);
  background-size: 12px 12px;
}