/* ==========================================================================
   JATRATIX VISUAL IDENTITY & THEME (css/theme.css)
   Brand Identity: जात्रा [Ticket] Tix (जात्रा को यात्रा)
   
   PRIMARY: Jatra Orange (#E1471C)
   SECONDARY: Utsav Yellow (#FFC72C)
   TYPOGRAPHY: Ink Charcoal (#1A1A1A) & Warm Gray (#5A5A5A)
   ATMOSPHERE: Warm, Energetic, Festive, Vibrant, Modern, Premium, Event-focused
   ========================================================================== */

/* 1. CORE BRAND TOKENS & PALETTE */
:root {
  --navbar-height: 74px;

  /* Brand Core Colors */
  --jatra-orange: #f25c30;
  --jatra-red: #f25c30;
  --jatra-red-dark: #e1471c;
  --jatra-red-hover: #e1471c;
  --jatra-red-subtle: #FFF4EF;
  --jatra-red-light: #FFF4EF;
  --orange-soft: #FFF4EF;
  --orange-tint: #FFF0EB;
  --jatra-red-glow: rgba(225, 71, 28, 0.2);

  --utsav-yellow: #FFC72C;
  --utsav-yellow-dark: #E5B015;
  --utsav-yellow-light: #FFFBEB;
  --utsav-yellow-subtle: #FFFBEB;
  --yellow-soft: #FFFBEB;
  --yellow-tint: #FFF9E6;

  /* Typography Colors — per Brand Guide p.4, these are text colors only.
     Use --surface-dark below for dark UI fills (buttons, dark badges, etc.)
     instead of reusing --ink-charcoal as a background. */
  --ink-charcoal: #1A1A1A;
  --warm-gray: #5A5A5A;
  --warm-gray-light: #767676;

  /* Dark UI surface — same value as ink-charcoal today, but a distinct token
     so typography and dark-fill usage can diverge later without a find/replace. */
  --surface-dark: #1A1A1A;

  /* Background Rhythm Tokens */
  --page-bg: #FFFDF8;
  --cream: #FFFDF8;
  --cream-alt: #FAF7F0;
  --section-alt: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: #FFF4EF;
  --surface-warm: #FFFBEB;

  --bg-dark: #FFFFFF;
  --bg-dark-secondary: #FFFDF8;
  --surface-card: #FFFFFF;
  --surface-card-hover: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --jatra-dark-bg: #1A1A1A;

  /* Warm Borders & Dividers */
  --border-light: #EFECE6;
  --border-subtle: #EFECE6;
  --border-medium: #E2DDD5;
  --border-highlight: rgba(225, 71, 28, 0.35);

  /* Text Aliases */
  --text-primary: #1A1A1A;
  --text-secondary: #5A5A5A;
  --text-muted: #5A5A5A;
  --text-main: #1A1A1A;
  --text-dim: #767676;
  --text-light: #1A1A1A;

  /* Shadows */
  --shadow-card: 0 4px 20px rgba(26, 26, 26, 0.05);
  --shadow-card-hover: 0 12px 30px rgba(225, 71, 28, 0.1);
  --shadow-glow: 0 8px 24px rgba(225, 71, 28, 0.18);
  --shadow-warm: 0 8px 24px rgba(255, 199, 44, 0.15);

  /* Typography Families */
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Poppins', sans-serif;
  /* Nepali / Devanagari script font — used for जात्रा wordmark and all Nepali text */
  --font-nepali: 'Yatra One', 'Noto Sans Devanagari', cursive, sans-serif;
}

/* 2. BASE STYLING */
body {
  background-color: var(--page-bg);
  color: var(--text-primary);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.03em;
  font-weight: 700;
}

p, span, div, li {
  color: inherit;
}

.text-muted {
  color: var(--warm-gray);
}

/* Section Titles */
.section-title-dark {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--ink-charcoal);
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.section-tag-dark {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--jatra-orange);
  margin-bottom: 0.5rem;
  display: inline-block;
}