/* Clubbie landing tokens — Pickled theme, production build */

/* ── Fonts ──────────────────────────────────────── */
@font-face { font-family: 'Figtree';             src: url('/fonts/figtree.ttf') format('truetype');             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree';             src: url('/fonts/figtree_bold.ttf') format('truetype');        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda';         src: url('/fonts/bodonimoda.ttf') format('truetype');          font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda';         src: url('/fonts/bodonimoda_bold.ttf') format('truetype');     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolagegrotesque.ttf') format('truetype');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('/fonts/bricolagegrotesque_bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans';   src: url('/fonts/plusjakartasans.ttf') format('truetype');     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans';   src: url('/fonts/plusjakartasans_bold.ttf') format('truetype');font-weight: 700; font-style: normal; font-display: swap; }

/* ── Defaults (= Pickled, toned down) ───────────── */
:root {
  /* Deep, warm-tinted dark. Not a pure-black SaaS void. */
  --bg:            #0F1612;
  --bg-elev:       #141C17;
  --card:          #18221D;
  --card-elev:     #1E2A24;
  --input-bg:      #131B16;

  --fg1:           #EDEFE7;   /* near-white with warm cast */
  --fg2:           #A8B2A8;
  --fg3:           #6E7971;
  --fg-on-primary: #08110C;
  --fg-on-accent:  #1A2012;

  /* Primary: calm emerald. NOT neon. */
  --primary:       #3CA678;
  --primary-light: #5FC898;
  --primary-dark:  #2A8A60;

  /* Accent: warm cream — used sparingly, for editorial italics/eyebrows */
  --accent:        #E8DCC0;
  --accent-warm:   #D4B88E;   /* when we need contrast on cream backgrounds */

  /* Semantic */
  --danger:        #E07B6B;
  --success:       #5BB98F;
  --warning:       #E0C07A;
  --link:          #7FC8A8;

  /* Borders / hairlines */
  --border:        rgba(232, 220, 192, 0.10);
  --border-strong: rgba(232, 220, 192, 0.18);
  --border-w:      1px;

  /* Light cream band — editorial contrast against the dark */
  --band-bg:       #F2ECDD;
  --band-elev:     #ECE4CE;
  --band-fg1:      #18221D;
  --band-fg2:      #55604F;
  --band-fg3:      #8C8F80;
  --band-border:   rgba(30, 42, 36, 0.12);
  --band-accent:   #2A8A60;

  /* Shadows */
  --shadow-card:       0 2px 14px rgba(0,0,0,0.35);
  --shadow-card-lg:    0 18px 48px -16px rgba(0,0,0,0.6), 0 6px 20px rgba(0,0,0,0.35);
  --shadow-phone:      0 40px 80px -20px rgba(0,0,0,0.55), 0 12px 32px -8px rgba(0,0,0,0.45);
  --shadow-button:     0 1px 3px rgba(0,0,0,0.25);
  --shadow-primary:    0 8px 26px -6px rgba(60, 166, 120, 0.4);

  /* Type families */
  --font-body:     'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-serif:    'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;

  /* Type scale */
  --t-display:   clamp(46px, 8.5vw, 108px);
  --t-section:   clamp(32px, 4.6vw, 58px);
  --t-feature:   clamp(26px, 3.2vw, 40px);
  --t-lede:      clamp(17px, 1.5vw, 20px);
  --t-h3:        22px;
  --t-body:      15px;
  --t-sm:        13px;
  --t-xs:        11.5px;
  --t-caps:      11px;

  --lh-tight:    1.02;
  --lh-body:     1.55;
  --ls-display:  -0.025em;
  --ls-caps:     2.2px;

  /* Radii */
  --r-card:    16px;
  --r-button:  999px;    /* pills */
  --r-chip:    999px;
  --r-input:   10px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 14px;
  --s-5: 16px;
  --s-6: 20px;
  --s-7: 24px;
  --s-8: 32px;

  /* Motion */
  --dur-fast:  150ms;
  --dur-base:  260ms;
  --dur-slow:  420ms;
  --ease-std:  cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}