/* ============================================================
   Tandoori Flame — Foundations
   Color, type, spacing, motion, elevation
   Brand pillars: warm hospitality · jewel tones · brass accents
   ============================================================ */

/* ---------- Fonts ----------
   Body sans:      Inter                (CLIENT-PROVIDED — variable font, weight 100–900)
   Header serif:   Cormorant Garamond   (Google Fonts — substitution flagged)
   Script accent:  Pinyon Script        (Google Fonts — substitution flagged)
   Body serif alt: Source Serif 4       (Google Fonts — substitution flagged)
   ------------------------------------------------ */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Pinyon+Script&family=Source+Serif+4:wght@400;500;600&display=swap');

:root {
  /* ===== CORE PALETTE ===========================================
     Pulled from the logo + interior photography.
     Deep crimson flame, saffron flame, brass linework,
     ivory parchment, lacquered wood, charcoal ink.
     ============================================================ */

  /* Primary — Crimson Flame (the dark side of the flame) */
  --tf-crimson-50:  #fbeeec;
  --tf-crimson-100: #f3d3cd;
  --tf-crimson-200: #e6a499;
  --tf-crimson-300: #d57565;
  --tf-crimson-400: #bf4d3a;
  --tf-crimson-500: #a8311e;   /* primary crimson */
  --tf-crimson-600: #8a2515;   /* hover */
  --tf-crimson-700: #6c1b0f;   /* press / deep */
  --tf-crimson-800: #4d150c;
  --tf-crimson-900: #2e0b07;

  /* Accent — Saffron Flame (the bright side of the flame) */
  --tf-saffron-50:  #fdf3df;
  --tf-saffron-100: #fae3b1;
  --tf-saffron-200: #f5cd75;
  --tf-saffron-300: #efb441;
  --tf-saffron-400: #e89c1c;
  --tf-saffron-500: #d98807;   /* primary saffron */
  --tf-saffron-600: #b06b05;
  --tf-saffron-700: #855004;
  --tf-saffron-800: #5a3603;
  --tf-saffron-900: #2e1c01;

  /* Brand — Brass (the metallic linework) */
  --tf-brass-50:  #faf3df;
  --tf-brass-100: #f1e2b0;
  --tf-brass-200: #e3c97d;
  --tf-brass-300: #d2af55;
  --tf-brass-400: #bf9636;     /* brass on dark */
  --tf-brass-500: #a87f24;     /* brass primary */
  --tf-brass-600: #8a6618;
  --tf-brass-700: #6c4f10;
  --tf-brass-800: #4d380a;
  --tf-brass-900: #2e2105;

  /* Wood — lacquered tandoor / interior wood */
  --tf-wood-50:  #f7ece0;
  --tf-wood-100: #ead2b3;
  --tf-wood-200: #d6ae7e;
  --tf-wood-300: #b88752;
  --tf-wood-400: #8f6232;
  --tf-wood-500: #6b481f;
  --tf-wood-600: #4d3416;
  --tf-wood-700: #33220d;

  /* Neutrals — Parchment to Ink */
  --tf-parchment:   #fbf6ec;   /* canvas / page */
  --tf-parchment-2: #f4ecdb;   /* surface */
  --tf-parchment-3: #ece1c7;   /* divider tint */
  --tf-cream:       #f8f1e0;
  --tf-bone:        #ebdec5;

  --tf-ink-50:  #f3efe7;
  --tf-ink-100: #d8d1c3;
  --tf-ink-200: #aea596;
  --tf-ink-300: #847b6c;
  --tf-ink-400: #5b5346;
  --tf-ink-500: #3a342a;       /* body */
  --tf-ink-600: #2a251d;       /* heading */
  --tf-ink-700: #1c1813;
  --tf-ink-800: #11100c;       /* deep ink — near-black */
  --tf-ink-900: #0a0907;

  /* Charcoal — the dark hero background (interior ceiling) */
  --tf-charcoal:    #1a1714;
  --tf-charcoal-2:  #25201b;
  --tf-charcoal-3:  #322b24;

  /* ===== SEMANTIC TOKENS ====================================== */

  /* Surfaces (light theme — default) */
  --tf-bg:           var(--tf-parchment);
  --tf-bg-elevated:  #ffffff;
  --tf-bg-sunken:    var(--tf-parchment-2);
  --tf-bg-inverse:   var(--tf-charcoal);

  --tf-surface-card:    #ffffff;
  --tf-surface-muted:   var(--tf-parchment-2);
  --tf-surface-overlay: rgba(26,23,20,0.6);

  /* Foreground */
  --tf-fg:        var(--tf-ink-600);
  --tf-fg-muted:  var(--tf-ink-400);
  --tf-fg-subtle: var(--tf-ink-300);
  --tf-fg-inverse: var(--tf-cream);

  /* Borders & lines */
  --tf-border:        rgba(26,23,20,0.08);
  --tf-border-strong: rgba(26,23,20,0.18);
  --tf-border-brass:  rgba(168,127,36,0.45);

  /* Accents (semantic) */
  --tf-accent:           var(--tf-crimson-500);
  --tf-accent-hover:     var(--tf-crimson-600);
  --tf-accent-press:     var(--tf-crimson-700);
  --tf-accent-soft:      var(--tf-crimson-50);
  --tf-on-accent:        #ffffff;

  --tf-gold:             var(--tf-brass-500);
  --tf-gold-soft:        var(--tf-brass-50);

  /* Status (kept warm — no clinical blues/greens) */
  --tf-success: #5a7a2f;       /* mint-leaf */
  --tf-warning: var(--tf-saffron-500);
  --tf-danger:  var(--tf-crimson-500);
  --tf-info:    #4a5d6a;       /* slate, used sparingly */

  /* Dietary tag colors (matched to category meaning) */
  --tf-tag-veg-fg:       #3d6320;
  --tf-tag-veg-bg:       #e7efd6;
  --tf-tag-vegan-fg:     #2f5a2a;
  --tf-tag-vegan-bg:     #dde9d3;
  --tf-tag-gf-fg:        #7a5a18;
  --tf-tag-gf-bg:        #f5e9c8;
  --tf-tag-spice-fg:     var(--tf-crimson-700);
  --tf-tag-spice-bg:     var(--tf-crimson-50);

  /* ===== TYPOGRAPHY =========================================== */

  --tf-font-display: 'Cormorant Garamond', 'Garamond', 'Georgia', serif;
  --tf-font-script:  'Pinyon Script', 'Snell Roundhand', cursive;
  --tf-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tf-font-prose:   'Source Serif 4', 'Georgia', serif;
  --tf-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular, hospitality-elevated */
  --tf-size-xs:   12px;
  --tf-size-sm:   14px;
  --tf-size-base: 16px;
  --tf-size-md:   18px;
  --tf-size-lg:   22px;
  --tf-size-xl:   28px;
  --tf-size-2xl:  36px;
  --tf-size-3xl:  48px;
  --tf-size-4xl:  64px;
  --tf-size-5xl:  88px;

  --tf-leading-tight: 1.1;
  --tf-leading-snug:  1.25;
  --tf-leading-base:  1.5;
  --tf-leading-loose: 1.7;

  --tf-tracking-tight:  -0.02em;
  --tf-tracking-normal: 0;
  --tf-tracking-wide:   0.04em;
  --tf-tracking-wider:  0.12em;     /* eyebrow / label caps */
  --tf-tracking-widest: 0.28em;     /* "F L A M E S" */

  /* ===== SPACING ============================================== */
  --tf-space-1:  4px;
  --tf-space-2:  8px;
  --tf-space-3:  12px;
  --tf-space-4:  16px;
  --tf-space-5:  20px;
  --tf-space-6:  24px;
  --tf-space-8:  32px;
  --tf-space-10: 40px;
  --tf-space-12: 48px;
  --tf-space-16: 64px;
  --tf-space-20: 80px;
  --tf-space-24: 96px;
  --tf-space-32: 128px;

  /* ===== RADII ================================================ */
  --tf-radius-xs:  2px;
  --tf-radius-sm:  4px;
  --tf-radius-md:  8px;
  --tf-radius-lg:  12px;
  --tf-radius-xl:  20px;
  --tf-radius-2xl: 28px;
  --tf-radius-pill: 999px;
  /* Arch — Mughal-style pointed arch (logo frame) */
  --tf-radius-arch-top: 50% 50% 0 0 / 30% 30% 0 0;

  /* ===== SHADOWS / ELEVATION ================================== */
  /* Warm-tinted shadows (no flat black — feels like incandescent room) */
  --tf-shadow-xs: 0 1px 2px rgba(76, 45, 20, 0.06);
  --tf-shadow-sm: 0 2px 6px rgba(76, 45, 20, 0.08);
  --tf-shadow-md: 0 6px 16px rgba(76, 45, 20, 0.10);
  --tf-shadow-lg: 0 16px 36px rgba(76, 45, 20, 0.14);
  --tf-shadow-xl: 0 28px 64px rgba(76, 45, 20, 0.20);
  --tf-shadow-glow-saffron: 0 0 0 1px rgba(217,136,7,0.35), 0 8px 28px rgba(217,136,7,0.30);
  --tf-shadow-inset-warm: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(76,45,20,0.06);

  /* ===== MOTION =============================================== */
  --tf-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --tf-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --tf-ease-warm: cubic-bezier(0.22, 1, 0.36, 1);  /* gentle, hospitality-feel */
  --tf-dur-fast:   140ms;
  --tf-dur-base:   220ms;
  --tf-dur-slow:   420ms;
  --tf-dur-curtain: 720ms;

  /* ===== LAYOUT =============================================== */
  --tf-content-narrow: 640px;
  --tf-content-base:   960px;
  --tf-content-wide:   1200px;
  --tf-content-bleed:  1440px;

  /* ===== GRADIENTS / OVERLAYS ================================ */
  --tf-flame-gradient: linear-gradient(180deg, #d98807 0%, #bf4d3a 55%, #6c1b0f 100%);
  --tf-brass-gradient: linear-gradient(135deg, #d2af55 0%, #a87f24 50%, #6c4f10 100%);
  --tf-protect-bottom: linear-gradient(180deg, rgba(26,23,20,0) 0%, rgba(26,23,20,0.85) 100%);
  --tf-protect-top:    linear-gradient(180deg, rgba(26,23,20,0.7) 0%, rgba(26,23,20,0) 100%);
  --tf-vignette:       radial-gradient(120% 80% at 50% 30%, rgba(26,23,20,0) 50%, rgba(26,23,20,0.55) 100%);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html { font-size: 16px; }

body {
  font-family: var(--tf-font-body);
  font-size: var(--tf-size-base);
  line-height: var(--tf-leading-base);
  color: var(--tf-fg);
  background: var(--tf-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Cormorant, refined and confident */
.tf-h1, h1.tf {
  font-family: var(--tf-font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, var(--tf-size-5xl));
  line-height: var(--tf-leading-tight);
  letter-spacing: var(--tf-tracking-tight);
  color: var(--tf-ink-700);
  text-wrap: balance;
}
.tf-h2, h2.tf {
  font-family: var(--tf-font-display);
  font-weight: 500;
  font-size: clamp(30px, 4vw, var(--tf-size-3xl));
  line-height: var(--tf-leading-snug);
  letter-spacing: var(--tf-tracking-tight);
  color: var(--tf-ink-700);
  text-wrap: balance;
}
.tf-h3, h3.tf {
  font-family: var(--tf-font-display);
  font-weight: 600;
  font-size: var(--tf-size-xl);
  line-height: var(--tf-leading-snug);
  color: var(--tf-ink-600);
}
.tf-h4, h4.tf {
  font-family: var(--tf-font-body);
  font-weight: 600;
  font-size: var(--tf-size-md);
  line-height: var(--tf-leading-snug);
  color: var(--tf-ink-600);
}

/* Eyebrow — small caps with brass accent (e.g. "APPETIZERS") */
.tf-eyebrow {
  font-family: var(--tf-font-body);
  font-weight: 600;
  font-size: var(--tf-size-xs);
  letter-spacing: var(--tf-tracking-wider);
  text-transform: uppercase;
  color: var(--tf-brass-600);
}

/* Wordmark — script "Tandoori" treatment */
.tf-script {
  font-family: var(--tf-font-script);
  font-weight: 400;
  font-size: var(--tf-size-3xl);
  color: var(--tf-brass-500);
  line-height: 1;
}

/* Logo lockup small caps — "F L A M E S" */
.tf-flames {
  font-family: var(--tf-font-display);
  font-weight: 500;
  font-size: var(--tf-size-md);
  letter-spacing: var(--tf-tracking-widest);
  text-transform: uppercase;
  color: var(--tf-brass-500);
}

/* Body text variants */
.tf-body  { font-family: var(--tf-font-body);  font-size: var(--tf-size-base); line-height: var(--tf-leading-base); color: var(--tf-fg); }
.tf-prose { font-family: var(--tf-font-prose); font-size: var(--tf-size-md);   line-height: var(--tf-leading-loose); color: var(--tf-fg); }
.tf-small { font-family: var(--tf-font-body);  font-size: var(--tf-size-sm);   color: var(--tf-fg-muted); }
.tf-caption { font-family: var(--tf-font-body); font-size: var(--tf-size-xs); letter-spacing: var(--tf-tracking-wide); color: var(--tf-fg-subtle); }

/* Price — tabular figures, ink */
.tf-price {
  font-family: var(--tf-font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink-700);
}

/* Menu dot leader (hospitality cue) */
.tf-leader {
  flex: 1;
  height: 1px;
  margin: 0 var(--tf-space-3) 6px;
  background-image: radial-gradient(circle, var(--tf-ink-200) 1px, transparent 1.2px);
  background-size: 6px 6px;
  background-position: bottom;
  background-repeat: repeat-x;
  align-self: end;
}

/* Brass hairline — used as section divider */
.tf-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--tf-brass-400) 20%, var(--tf-brass-400) 80%, transparent 100%);
  opacity: 0.6;
}