/* ==========================================================================
   ENIGMA BAR — Design Tokens
   Misterioso · Lujoso · Místico · Steampunk
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — Google Fonts substitutions (flagged to user)
   - Cinzel Decorative → closest match to the ornate ENIGMA wordmark
   - Cinzel           → clean Roman-capital companion for H2/H3
   - Cormorant Garamond → luxurious serif for long-form copy & menus
   - Inter            → neutral UI sans for forms, labels, system text
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand core ---------- */
  --enigma-teal-900:      #061F23;   /* deepest shadow / page bg dim */
  --enigma-teal-800:      #0B373C;   /* brand teal (logo bg) */
  --enigma-teal-700:      #124249;   /* raised surface */
  --enigma-teal-600:      #1A525A;   /* hover surface */

  --enigma-gold-700:      #8A6A32;   /* deep antique gold (pressed) */
  --enigma-gold-600:      #A38142;   /* brand gold (logo) */
  --enigma-gold-500:      #C4A15A;   /* interactive gold */
  --enigma-gold-400:      #D9BE7C;   /* highlight gold / hover */
  --enigma-gold-300:      #EBD6A0;   /* soft gold glow */

  --enigma-ink-900:       #0A0A0B;   /* absolute black on-brand */
  --enigma-ink-800:       #1A1A1C;

  --enigma-parchment-50:  #F5EEDD;   /* aged paper / menu bg */
  --enigma-parchment-100: #EADFC2;
  --enigma-parchment-200: #D9C89A;

  --enigma-crimson-900:   #2A0609;   /* wine-shadow */
  --enigma-crimson-800:   #4A0E13;   /* deep crimson drapery */
  --enigma-crimson-700:   #6B1119;   /* burgundy — co-lead with gold */
  --enigma-crimson-600:   #8A1A22;   /* velvet red */
  --enigma-crimson-500:   #A83039;   /* highlight red (e.g. candlelit fabric) */
  --enigma-copper-600:    #7A3E1C;
  --enigma-copper-500:    #9C5A2C;   /* cobre — bitters / aperitivo accent */
  --enigma-amber-500:     #B87A2E;   /* tungsten amber — warm light */
  --enigma-amber-400:     #D99A4A;

  /* ---------- Semantic — surface & text (dark default) ---------- */
  --bg-page:              var(--enigma-teal-900);
  --bg-surface:           var(--enigma-teal-800);
  --bg-surface-raised:    var(--enigma-teal-700);
  --bg-surface-hover:     var(--enigma-teal-600);
  --bg-inverse:           var(--enigma-parchment-50);

  --fg-1:                 #F2E9D0;   /* primary text — warm ivory */
  --fg-2:                 #C9BFA6;   /* secondary text */
  --fg-3:                 #8C8675;   /* tertiary / captions */
  --fg-muted:             #5E5A4F;
  --fg-accent:            var(--enigma-gold-500);
  --fg-accent-strong:     var(--enigma-gold-400);
  --fg-on-gold:           var(--enigma-teal-900);
  --fg-on-parchment:      var(--enigma-ink-900);

  /* ---------- Semantic — status ---------- */
  --status-success:       #6B8E4E;   /* absinthe green */
  --status-warning:       var(--enigma-gold-500);
  --status-danger:        var(--enigma-crimson-600);
  --status-info:          #6C8CA8;

  /* ---------- Borders & dividers ---------- */
  --border-hairline:      rgba(196, 161, 90, 0.18);   /* gold @ low alpha */
  --border-subtle:        rgba(196, 161, 90, 0.32);
  --border-strong:        var(--enigma-gold-600);
  --border-etched:        rgba(242, 233, 208, 0.10);  /* ivory for dark panels */

  /* ---------- Shadows — deep, warm, atmospheric ---------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:  0 2px 6px rgba(0,0,0,.50);
  --shadow-md:  0 8px 24px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.40);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.65), 0 6px 16px rgba(0,0,0,.45);
  --shadow-glow-gold: 0 0 0 1px rgba(196,161,90,.35), 0 0 24px rgba(196,161,90,.18);
  --shadow-inner-etch: inset 0 1px 0 rgba(235,214,160,.08), inset 0 -1px 0 rgba(0,0,0,.35);

  /* ---------- Radii — minimal; brand leans on geometric frames ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Typography — families ---------- */
  --font-display: 'Cinzel Decorative', 'Trajan Pro', serif;  /* hero / logo-adjacent */
  --font-heading: 'Cinzel', 'Cormorant Garamond', serif;      /* H2/H3, section labels */
  --font-serif:   'Cormorant Garamond', 'Garamond', serif;    /* body / menus */
  --font-ui:      'Inter', system-ui, sans-serif;             /* UI chrome only */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;  /* rare */

  /* ---------- Typography — scale (fluid-ready) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-display: 0.14em;  /* wide, carved-into-metal feel */
  --ls-heading: 0.10em;
  --ls-label:   0.22em;  /* small caps labels */
  --ls-body:    0.01em;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);  /* velvet close */
  --ease-mechanical: cubic-bezier(.65, .05, .36, 1); /* gear-tick */
  --dur-instant: 90ms;
  --dur-fast:    180ms;
  --dur-med:     320ms;
  --dur-slow:    520ms;
  --dur-reveal:  900ms;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-reading: 680px;
}

/* ==========================================================================
   Semantic type styles — use these, not raw sizes
   ========================================================================== */

.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 8vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  color: var(--fg-1);
}

.t-eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.t-menu-item {           /* cocktail / wine name on a menu */
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.t-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.t-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-ui {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}

.t-price {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  color: var(--fg-accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Base element styles (opt-in via class on <html> or <body>)
   ========================================================================== */

.enigma {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.enigma h1 { @extend .t-h1; }
.enigma h2 { @extend .t-h2; }
.enigma h3 { @extend .t-h3; }

/* ==========================================================================
   Decorative — subtle paper grain & etched frames
   ========================================================================== */

.bg-paper {
  background-color: var(--enigma-parchment-50);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(138,106,50,.07), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(92,31,36,.06), transparent 45%);
  color: var(--fg-on-parchment);
}

.bg-atmosphere {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(196,161,90,.10), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(11,55,60,0), transparent 60%),
    var(--enigma-teal-900);
}

.frame-etched {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-inner-etch);
}

.rule-ornate {               /* horizontal decorative rule */
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--enigma-gold-600) 20%,
    var(--enigma-gold-400) 50%,
    var(--enigma-gold-600) 80%,
    transparent 100%);
}