/* ============================================================
   FARAÓN RESTAURANT — Colors & Type foundations
   Authentic Lebanese Cuisine · Doral, Miami
   Fonts: Roboto Slab (headings) + Roboto (body) via Google Fonts.
   Wordmark "Faraón" is a hand-script logo IMAGE (assets/logo-*).
   Yellowtail is used only as a CSS fallback for script text — FLAGGED.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Yellowtail&display=swap');

:root {
  /* ---- BRAND PALETTE (raw) ---- */
  --gold:            #FDBA38;  /* primary warm amber — buttons, accents, emblem */
  --gold-light:      #FED27A;  /* hover-up / highlights */
  --gold-deep:       #E89A1C;  /* hover-down / pressed gold */
  --gold-wash:       #FBEFD6;  /* faint gold tint backgrounds */

  --espresso:        #2F211C;  /* deep brown — headers, dark sections */
  --espresso-soft:   #3D2C25;  /* raised surfaces on dark */
  --espresso-deep:   #1E1410;  /* deepest brown / overlays */

  --navy:            #1F3C7D;  /* footer, secondary accent */
  --navy-light:      #2E51A0;

  --cream:           #FBF7F0;  /* warm off-white page background */
  --sand:            #F2E9DB;  /* warm neutral card / divider tint */

  --ink:             #333333;  /* body text on light */
  --ink-soft:        #6B5F58;  /* secondary text on light */
  --white:           #FFFFFF;
  --white-soft:      #F4EFE9;  /* warm white text on dark */
  --white-dim:       rgba(255,255,255,0.72);

  /* ---- SEMANTIC COLORS ---- */
  --bg:              var(--cream);
  --bg-dark:         var(--espresso);
  --surface:         var(--white);
  --surface-tint:    var(--gold-wash);
  --fg1:             var(--ink);        /* primary text on light */
  --fg2:             var(--ink-soft);   /* secondary text on light */
  --fg-on-dark:      var(--white-soft); /* primary text on dark */
  --fg-on-dark-2:    var(--white-dim);  /* secondary text on dark */
  --accent:          var(--gold);
  --accent-hover:    var(--gold-deep);
  --link:            var(--navy);
  --border:          #E6DCCC;           /* warm hairline on light */
  --border-dark:     rgba(253,186,56,0.22); /* gold hairline on dark */

  --success:         #2E7D52;
  --price:           var(--espresso);   /* menu prices */

  /* ---- TYPE FAMILIES ---- */
  --font-head:       'Roboto Slab', Georgia, 'Times New Roman', serif;
  --font-body:       'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:     'Yellowtail', 'Brush Script MT', cursive; /* SUBSTITUTE for wordmark */

  /* ---- TYPE SCALE (desktop) ---- */
  --fs-display:      clamp(44px, 6vw, 76px);
  --fs-h1:           clamp(34px, 4.4vw, 54px);
  --fs-h2:           clamp(27px, 3vw, 38px);
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      19px;
  --fs-body:         16.5px;
  --fs-small:        14px;
  --fs-eyebrow:      13px;  /* uppercase label */

  --lh-tight:        1.08;
  --lh-head:         1.18;
  --lh-body:         1.65;

  --ls-eyebrow:      0.18em;
  --ls-head:         -0.01em;

  /* ---- RADII ---- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;   /* generous rounded buttons */

  /* ---- SHADOWS ---- */
  --shadow-sm:  0 1px 3px rgba(47,33,28,0.08);
  --shadow-md:  0 6px 20px rgba(47,33,28,0.12);
  --shadow-lg:  0 18px 48px rgba(47,33,28,0.20);
  --shadow-gold:0 8px 22px rgba(232,154,28,0.34);

  /* ---- SPACING (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --maxw: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .faraon-type scope)
   ============================================================ */
.faraon-type { color: var(--fg1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); }

.faraon-type .eyebrow,
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-hover);
}
.display   { font-family: var(--font-script); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-tight); color: var(--gold); }
h1, .h1    { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--espresso); }
h2, .h2    { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-head); color: var(--espresso); }
h3, .h3    { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--espresso); }
h4, .h4    { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h4); color: var(--espresso); }
.lead      { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg2); }
p          { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg1); }
small, .small { font-size: var(--fs-small); color: var(--fg2); }
a, .link   { color: var(--link); text-decoration: none; }
a:hover    { color: var(--navy-light); }