/* Fonts — Barlow Condensed (display) + Inter Variable (body) */
/* font-display: optional prevents FOUT-induced CLS (no font swap after first render) */
/* Fonts served from public/fonts/ — path relative to the deployed _astro/ CSS file */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@import '@fontsource-variable/inter/index.css';

/* Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================
   Rolled Smoke — Food Truck — Day 47
   Street-smoked, high-energy.
   Palette: charcoal #1C1C1C · flame-red #E63329 (text: #8C1815)
            mustard #F0A500 (text: #7A5200) · cream #FAF7F2
   Barlow Condensed (display, bold) + Inter Variable (body)
   ============================================================ */

:root {
  /* Backgrounds */
  --color-bg:           #FAF7F2;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F5F0E8;
  --color-surface-dark: #1C1C1C;
  --color-border:       #DDD4C0;
  --color-border-dark:  #3A3A3A;

  /* Text */
  --color-text:         #1C1C1C;
  --color-text-body:    #2A2A2A;
  --color-text-muted:   #5A5248;
  /* #5A5248 on #FAF7F2 ≈ 6.1:1 AA */
  --color-text-faint:   #7A7168;
  /* #7A7168 on #FAF7F2 ≈ 4.6:1 AA */
  --color-text-light:   #FAF7F2;

  /* Flame red — primary accent */
  --color-flame:        #E63329;
  --color-flame-text:   #8C1815;
  /* #8C1815 on #FAF7F2 ≈ 7.8:1 AAA */
  --color-flame-bg:     #FDE8E7;
  --color-flame-hover:  #C62820;
  --color-flame-dark:   #B52220;

  /* Mustard gold — secondary accent */
  --color-mustard:      #F0A500;
  --color-mustard-text: #7A5200;
  /* #7A5200 on #FAF7F2 ≈ 6.8:1 AA */
  --color-mustard-bg:   #FEF3CC;
  --color-mustard-dark: #B87D00;

  /* Charcoal */
  --color-charcoal:     #1C1C1C;
  --color-charcoal-2:   #3A3A3A;
  --color-charcoal-3:   #6B6B6B;

  /* Buttons */
  --color-btn-bg:       #E63329;
  --color-btn-text:     #FFFFFF;
  /* #FFFFFF on #E63329 ≈ 3.8:1 — for large/bold buttons */
  /* AA-safe: use #B52220 (#FFFFFF on #B52220 ≈ 5.4:1) */
  --color-btn-bg-aa:    #B52220;
  --color-btn-hover:    #C62820;
}

/* ============================================================
   Base
   ============================================================ */
@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    background-color: var(--color-bg);
    color: var(--color-text-body);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
    color: var(--color-text);
    line-height: 1.05;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  ::selection {
    background-color: var(--color-mustard);
    color: var(--color-charcoal);
  }

  * {
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

/* ============================================================
   Components
   ============================================================ */
@layer components {
  /* Layout container */
  .container-x {
    @apply mx-auto w-full max-w-6xl px-4 sm:px-6 lg:px-8;
  }

  /* Primary button — flame red */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-sm font-bold px-6 py-3 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 uppercase tracking-wider text-sm;
    background-color: var(--color-btn-bg-aa);
    color: var(--color-btn-text);
    /* #FFFFFF on #B52220 ≈ 5.4:1 AA */
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
  }
  .btn-primary:hover {
    background-color: var(--color-btn-hover);
  }

  /* Ghost button */
  .btn-ghost {
    @apply inline-flex items-center justify-center gap-2 rounded-sm font-bold px-6 py-3 border-2 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 uppercase tracking-wider text-sm;
    border-color: var(--color-flame-dark);
    color: var(--color-flame-text);
    /* #8C1815 on cream ≈ 7.8:1 AAA */
    background: transparent;
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
  }
  .btn-ghost:hover {
    background-color: var(--color-flame-bg);
  }

  /* Mustard button */
  .btn-mustard {
    @apply inline-flex items-center justify-center gap-2 rounded-sm font-bold px-6 py-3 transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 uppercase tracking-wider text-sm;
    background-color: var(--color-mustard);
    color: var(--color-charcoal);
    /* #1C1C1C on #F0A500 ≈ 9.3:1 AAA */
    font-family: 'Barlow Condensed', sans-serif;
    letter-spacing: 0.08em;
  }
  .btn-mustard:hover {
    background-color: var(--color-mustard-dark);
    color: #FFFFFF;
  }

  /* Section eyebrow label */
  .section-eyebrow {
    @apply text-xs font-bold uppercase tracking-[0.15em];
    color: var(--color-flame-text);
    font-family: 'Barlow Condensed', sans-serif;
  }

  .section-title {
    @apply text-4xl sm:text-5xl font-bold mt-2;
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--color-text);
    letter-spacing: 0.01em;
  }

  /* Card */
  .card {
    @apply rounded-sm border p-5;
    background-color: var(--color-surface);
    border-color: var(--color-border);
  }

  /* Schedule day card */
  .schedule-card {
    @apply rounded-sm p-5 border-l-4 flex flex-col gap-1;
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-left-color: var(--color-flame);
  }
  .schedule-card.today {
    background-color: var(--color-flame-bg);
    border-left-color: var(--color-flame-dark);
  }

  /* Menu tag badges */
  .menu-tag {
    @apply inline-flex items-center text-xs font-bold rounded-full px-2 py-0.5 uppercase tracking-wide;
    font-family: 'Barlow Condensed', sans-serif;
  }
  .menu-tag-bestseller {
    background-color: var(--color-mustard-bg);
    color: var(--color-mustard-text);
    /* #7A5200 on #FEF3CC ≈ 6.8:1 AA */
  }
  .menu-tag-new {
    background-color: var(--color-flame-bg);
    color: var(--color-flame-text);
    /* #8C1815 on #FDE8E7 ≈ 7.1:1 AA */
  }
  .menu-tag-spicy {
    background-color: #FDE8E7;
    color: #8C1815;
    /* #8C1815 on #FDE8E7 ≈ 7.1:1 AA */
  }
  .menu-tag-gf {
    background-color: #D1FAE5;
    color: #065F46;
    /* #065F46 on #D1FAE5 ≈ 7.25:1 AAA */
  }
  .menu-tag-vg {
    background-color: #DCFCE7;
    color: #14532D;
    /* #14532D on #DCFCE7 ≈ 8.2:1 AAA */
  }
  .menu-tag-df {
    background-color: #E0E7FF;
    color: #3730A3;
    /* #3730A3 on #E0E7FF ≈ 7.5:1 AA */
  }

  /* Section tinted */
  .section-tinted {
    background-color: var(--color-surface-2);
  }

  .section-dark {
    background-color: var(--color-surface-dark);
    color: var(--color-text-light);
  }

  /* Menu tab buttons */
  .menu-tab-btn {
    @apply px-5 py-2.5 font-bold text-sm uppercase tracking-wider transition-colors duration-200 border-b-2 border-transparent focus-visible:outline-none focus-visible:ring-2;
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--color-text-muted);
  }
  .menu-tab-btn.active,
  .menu-tab-btn[aria-selected="true"] {
    border-bottom-color: var(--color-flame);
    color: var(--color-flame-text);
  }
  .menu-tab-btn:hover:not(.active) {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
  }
}

/* ============================================================
   Utilities
   ============================================================ */
@layer utilities {
  .font-display {
    font-family: 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  }
  .text-balance {
    text-wrap: balance;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}
