/* ============================================================
   LADY LEE'S — Family Restaurant & Billiards
   Colors & Type foundations
   Retro 1950s diner + atomic-age billiard hall
   ============================================================ */

/* ---- Webfonts -------------------------------------------------
   Lobster + Recoleta now self-hosted (real licensed files in fonts/).
   Montserrat + Open Sans from Google.
--------------------------------------------------------------- */
/* Google Fonts loaded via <link> in head.php for non-render-blocking delivery */

@font-face {
  font-family: 'Lobster'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Lobster-Regular.woff2') format('woff2'),
       url('fonts/Lobster-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Recoleta'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Recoleta-Light.woff2') format('woff2'),
       url('fonts/Recoleta-Light.otf') format('opentype');
}
@font-face {
  font-family: 'Recoleta'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Recoleta-Regular.woff2') format('woff2'),
       url('fonts/Recoleta-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Recoleta'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Recoleta-Medium.woff2') format('woff2'),
       url('fonts/Recoleta-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'Recoleta'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('fonts/Recoleta-Bold.woff2') format('woff2'),
       url('fonts/Recoleta-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Recoleta'; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url('fonts/Recoleta-Black.woff2') format('woff2'),
       url('fonts/Recoleta-Black.otf') format('opentype');
}

:root {
  /* ---- PRIMARY PALETTE ---- */
  --pd-red:        #ef6b6b;  /* Buttons, accents, stars, laser */
  --pd-teal:       #4db6ac;  /* Feature strip, frames, borders */
  --pd-teal-dark:  #17383b;  /* Headlines, body on teal, dark bg */
  --pd-cream:      #fff3de;  /* Section backgrounds, cards */
  --pd-ink:        #2c2c2c;  /* Body text, borders */

  /* ---- SECONDARY / ACCENT ---- */
  --pd-red-dark:   #c0392b;  /* Button hover states */
  --pd-pink:       #ffb3c1;  /* Soft accents, placeholders */
  --pd-gold:       #c9962a;  /* Starburst accents, dividers */

  /* ---- TINTS / SUPPORT (derived, oklch-harmonized) ---- */
  --pd-teal-soft:  #8fd0c8;  /* hover tints, light teal fills */
  --pd-cream-deep: #f6e6c8;  /* card edges, subtle dividers on cream */
  --pd-ink-60:     rgba(44, 44, 44, .60);
  --pd-cream-82:   rgba(255, 243, 222, .82);

  /* ---- SHADOW SYSTEM ---- */
  --pd-shadow:      0 18px 45px rgba(44, 44, 44, .18);  /* signature lift */
  --pd-shadow-sm:   0 4px 14px rgba(44, 44, 44, .12);   /* cards, buttons */
  --pd-shadow-card: 0 10px 28px rgba(44, 44, 44, .14);

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --sp-1: 4px;    /* icon gap, tight inline */
  --sp-2: 8px;    /* component internal gap */
  --sp-3: 16px;   /* 1rem — base unit, card padding */
  --sp-4: 24px;   /* 1.5rem — section gaps, nav spacing */
  --sp-5: 32px;   /* 2rem — section padding min */
  --sp-section: clamp(3rem, 6vw, 6rem);  /* section padding fluid */

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --r-sm:   6px;        /* Buttons, badges, small UI (4–6px) */
  --r-md:   9px;        /* Cards, comp-cards (8–10px) */
  --r-lg:   14px;       /* Large containers, panels (12–16px) */
  --r-pill: 999px;      /* Icon circles, pill badges */
  --r-hero: 48% 0 0 48%; /* Hero photo frame (desktop) */

  /* ============================================================
     Z-INDEX STACK
     ============================================================ */
  --z-hero-photo:   1;
  --z-header-top:   10;
  --z-hero-grid:    40;
  --z-feature:      50;
  --z-header-fixed: 100;

  /* ============================================================
     TYPE — FONT FAMILIES
     ============================================================ */
  --font-script:  'Lobster', 'Brush Script MT', cursive;          /* logo / eyebrow / script */
  --font-display: 'Recoleta', Georgia, serif;                     /* h1 / h2 / section titles */
  --font-label:   'Montserrat', system-ui, sans-serif;            /* nav / buttons / labels — ALL CAPS */
  --font-body:    'Open Sans', system-ui, -apple-system, sans-serif; /* body, lede */

  /* ---- SEMANTIC TYPE TOKENS ---- */
  --fg:       var(--pd-ink);
  --fg-head:  var(--pd-teal-dark);
  --fg-muted: var(--pd-ink-60);
  --fg-accent: var(--pd-red);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply these classes or copy the rules.
   ============================================================ */

/* Script eyebrow / decorative — "Where Good Food" */
.pd-script {
  font-family: var(--font-script);
  color: var(--pd-red);
  font-weight: 400;
  line-height: 1.05;
}

/* Display headline — Recoleta(sub: Bitter) */
.pd-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--fg-head);
}
.pd-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--fg-head);
}
.pd-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.12;
  color: var(--fg-head);
}

/* Labels / nav / buttons — Montserrat 900, uppercase, tracked */
.pd-label {
  font-family: var(--font-label);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
}

/* Lede / body-bold intro — Open Sans 700 */
.pd-lede {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--fg-head);
}

/* Body copy — Open Sans 400 */
.pd-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg);
}

/* ============================================================
   DECORATIVE PATTERNS
   ============================================================ */

/* Checker stripe — header ::after divider */
.pd-checker {
  height: 14px;
  background-image:
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%),
    linear-gradient(45deg, var(--pd-teal) 25%, transparent 25%, transparent 75%, var(--pd-teal) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  background-color: var(--pd-cream);
  opacity: .55;
}