/* ===========================================================================
   The Maverick Movement — Design Tokens
   Source of truth: design handoff (`design-tokens/tokens/*.css`) supplied by
   Claude Design for this build. Do not hand-tweak values here without also
   updating the handoff copy kept in git history — these are sampled directly
   from the brand's logo lockups, not invented.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ---- Ink — warm near-black surfaces ---- */
  --ink-900: #0B0908;
  --ink-850: #100D0C;
  --ink-800: #14110F;
  --ink-700: #1C1817;
  --ink-600: #262120;
  --ink-500: #322B28;
  --ink-400: #443B36;

  /* ---- Gold — champagne → bronze foil ---- */
  --gold-100: #FEEEB1;
  --gold-200: #F4D789;
  --gold-300: #EAC36C;
  --gold-400: #E0A94F;
  --gold-500: #CA923B;
  --gold-600: #A8742C;
  --gold-700: #7D5132;

  /* ---- Neutral text — warm whites & taupes ---- */
  --cream:      #F4ECDD;
  --parchment:  #E6D9C4;
  --taupe-300:  #BCAE98;
  --taupe-400:  #93876F;
  --taupe-500:  #6E6354;

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--ink-850);
  --bg-surface:     var(--ink-700);
  --bg-elevated:    var(--ink-600);
  --bg-inset:       var(--ink-900);

  --text-primary:   var(--cream);
  --text-secondary: var(--taupe-300);
  --text-tertiary:  var(--taupe-400);
  --text-disabled:  var(--taupe-500);
  --text-gold:      var(--gold-400);
  --text-on-gold:   var(--ink-900);

  --accent:         var(--gold-400);
  --accent-strong:  var(--gold-300);
  --accent-deep:    var(--gold-600);

  --border-subtle:  var(--ink-500);
  --border-strong:  var(--ink-400);
  --border-gold:    rgba(224, 169, 79, 0.38);
  --border-gold-strong: rgba(224, 169, 79, 0.70);

  --gradient-gold:        linear-gradient(165deg, #FEEEB1 0%, #E9C16A 32%, #E0A94F 58%, #B5832F 100%);
  --gradient-gold-soft:   linear-gradient(165deg, #F4D789 0%, #D9A24A 100%);
  --gradient-ink:         linear-gradient(180deg, #1C1817 0%, #100D0C 100%);
  --vignette: radial-gradient(120% 90% at 50% 42%, rgba(46,33,32,0.55) 0%, rgba(11,9,8,0.0) 45%, rgba(11,9,8,0.85) 100%);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-serif:   'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --font-sans:    'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-display: 0.08em;
  --tracking-wide:    0.18em;
  --tracking-label:   0.12em;
  --tracking-normal:  0.01em;
  --tracking-tight:  -0.01em;

  /* ---- Spacing (4px grid) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --container-sm:  640px;
  --container-md:  920px;
  --container-lg:  1140px;
  --container-xl:  1320px;
  --gutter:        clamp(1.5rem, 5vw, 5rem);
  --section-y:     clamp(4rem, 9vw, 8rem);

  /* ---- Effects ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:  0 6px 18px rgba(0,0,0,0.50);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.55);
  --shadow-xl:  0 28px 70px rgba(0,0,0,0.62);

  --glow-gold-sm: 0 0 12px rgba(224,169,79,0.22);
  --glow-gold-md: 0 0 28px rgba(224,169,79,0.30);
  --glow-gold-lg: 0 0 56px rgba(224,169,79,0.34);

  --inset-top-sheen: inset 0 1px 0 rgba(255,240,200,0.06);
  --inset-gold-edge: inset 0 0 0 1px rgba(224,169,79,0.14);
  --shadow-card: var(--shadow-md), var(--inset-top-sheen);

  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  --z-sticky:  100;
}