/* ────────────────────────────────────────────────────────────
   STEAKS N BUNS — DESIGN TOKENS
   Bilingual (EN/AR) bilingual-ready, mobile-first.
   ──────────────────────────────────────────────────────────── */

:root {
  /* Brand palette — warm, premium, editorial.
     Names from the Steaks N Buns palette card. */
  --snb-green:        #1c261c;   /* Underworld — primary deep green */
  --snb-green-deep:   #020709;   /* Eight Ball — near-black */
  --snb-green-soft:   #1c2c27;   /* Bitter Liquorice — softer dark */
  --snb-yellow:       #e8b600;   /* Honey Gold — accent */
  --snb-yellow-deep:  #c69900;   /* darker pressed state */
  --snb-yellow-soft:  #fce193;   /* Banana Republic — soft secondary yellow */
  --snb-cream:        #fcfbe1;   /* Cornsilk — primary background */
  --snb-cream-2:      #dfcfab;   /* Boutique Beige — layered cream */
  --snb-paper:        #ffffff;
  --snb-rust:         #bd611f;   /* Polished Copper — spice / fire */
  --snb-orange:       #e69c41;   /* Persimmon — warm warning / accent */
  --snb-tobacco:      #8b7557;   /* Tobacco Leaf — neutral warm */
  --snb-cocoa:        #ba805b;   /* Silken Chocolate — secondary warm */
  --snb-peat:         #553925;   /* Peat Brown — deep warm */
  --snb-eclipse:      #413b37;   /* Eclipse — warm dark */
  --snb-stone:        #818b81;   /* Mummy's Tomb — sage gray */
  --snb-smoke:        #5a5856;   /* Smokescreen — warm gray */
  --snb-ink:          #020709;
  --snb-ink-soft:     rgba(2,7,9,0.65);
  --snb-ink-faint:    rgba(2,7,9,0.42);
  --snb-line:         rgba(28,38,28,0.14);
  --snb-success:      #6b8a3a;
  --snb-warn:         #e69c41;
  --snb-danger:       #bd611f;

  /* Type stack — Ohno Blazeface (48pt) for display, (18pt) for body-display */
  --snb-display: "ohno-blazeface", "Bowlby One", "Cooper Black", Georgia, serif;
  --snb-headline: "ohno-blazeface", "Bowlby One", "Alfa Slab One", Georgia, serif;
  --snb-body:     "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --snb-arabic:   "Readex Pro", "readex-pro-vf", "Cairo", "Tajawal", system-ui, sans-serif;
  --snb-arabic-display: "Readex Pro", "readex-pro-vf", "Cairo", "Tajawal", system-ui, sans-serif;

  /* Spacing (8px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 14px rgba(10,29,16,.08);
  --shadow-lift: 0 14px 40px rgba(10,29,16,.18);
  --shadow-cta:  0 10px 30px rgba(29,58,37,.35);
}

/* ────────────────────────────────────────────────────────────
   Checker stripe — Steaks N Buns signature pattern
   ──────────────────────────────────────────────────────────── */
.snb-checker {
  background-color: var(--snb-cream);
  background-image:
    linear-gradient(135deg, var(--snb-green) 25%, transparent 25%),
    linear-gradient(225deg, var(--snb-green) 25%, transparent 25%),
    linear-gradient(45deg,  var(--snb-green) 25%, transparent 25%),
    linear-gradient(315deg, var(--snb-green) 25%, transparent 25%);
  background-position: 22px 0, 22px 0, 0 0, 0 0;
  background-size: 44px 44px;
  background-repeat: repeat;
}

.snb-checker-row {
  height: 36px;
  background: repeating-linear-gradient(
    -28deg,
    var(--snb-green) 0 18px,
    var(--snb-cream) 18px 36px
  );
}

.snb-checker-row.thin { height: 22px; background-size: auto, auto; }

/* Readex Pro VF is a variable font — Adobe's kit requires explicit
   font-variation-settings to engage axes. The HEXP axis (0..100) controls
   the Arabic vs Latin extension; we keep it at 0. */
.snb-root[dir="rtl"],
.snb-root[dir="rtl"] * {
  font-variation-settings: "HEXP" 0, "wght" 400;
}
.snb-root[dir="rtl"] .snb-display,
.snb-root[dir="rtl"] .snb-headline,
.snb-root[dir="rtl"] h1,
.snb-root[dir="rtl"] h2,
.snb-root[dir="rtl"] h3,
.snb-root[dir="rtl"] strong,
.snb-root[dir="rtl"] b {
  font-variation-settings: "HEXP" 0, "wght" 700;
}

/* Responsive — mobile/desktop layouts hide based on viewport */
.snb-mobile-only  { display: block; }
.snb-desktop-only { display: none; }
@media (min-width: 900px) {
  .snb-mobile-only  { display: none; }
  .snb-desktop-only { display: block; }
}

/* Base reset within artboards */
.snb-root {
  font-family: var(--snb-body);
  color: var(--snb-ink);
  background: var(--snb-cream);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.snb-root * { box-sizing: border-box; }
.snb-root img { max-width: 100%; display: block; }
.snb-root[dir="rtl"] { font-family: var(--snb-arabic); }

/* Type */
.snb-display { font-family: var(--snb-display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.95; }
.snb-root[dir="rtl"] .snb-display { font-family: var(--snb-arabic-display); line-height: 1.1; font-weight: 700; font-variation-settings: "HEXP" 0, "wght" 700; }

.snb-headline { font-family: var(--snb-headline); font-weight: 700; letter-spacing: 0.01em; line-height: 1.05; }
.snb-root[dir="rtl"] .snb-headline { font-family: var(--snb-arabic-display); font-weight: 700; font-variation-settings: "HEXP" 0, "wght" 700; }

.snb-eyebrow {
  font-family: var(--snb-body);
  font-weight: 700; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--snb-green);
}
.snb-root[dir="rtl"] .snb-eyebrow { letter-spacing: 0; font-family: var(--snb-arabic); }

/* Buttons */
.snb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 22px; border-radius: var(--r-pill);
  border: 0; cursor: pointer;
  font-family: var(--snb-body); font-weight: 700; font-size: 15px;
  letter-spacing: 0.01em; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.snb-btn:active { transform: translateY(1px) scale(.99); }
.snb-btn-primary { background: var(--snb-green); color: var(--snb-cream); box-shadow: var(--shadow-cta); }
.snb-btn-primary:hover { background: var(--snb-green-deep); }
.snb-btn-yellow { background: var(--snb-yellow); color: var(--snb-green-deep); box-shadow: 0 8px 24px rgba(224,205,47,.4); }
.snb-btn-yellow:hover { background: var(--snb-yellow-deep); }
.snb-btn-ghost { background: transparent; color: var(--snb-green); box-shadow: inset 0 0 0 2px var(--snb-green); }
.snb-btn-ghost:hover { background: var(--snb-green); color: var(--snb-cream); }
.snb-btn-cream { background: var(--snb-cream); color: var(--snb-green); }
.snb-btn-sharp { border-radius: var(--r-md) !important; }

/* Cards */
.snb-card {
  background: var(--snb-paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Badge */
.snb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  background: var(--snb-cream); color: var(--snb-green);
  box-shadow: inset 0 0 0 1px var(--snb-line);
}
.snb-badge.solid { background: var(--snb-green); color: var(--snb-cream); box-shadow: none; }
.snb-badge.yellow { background: var(--snb-yellow); color: var(--snb-green-deep); box-shadow: none; }

/* Mobile section spacing */
.snb-section { padding: var(--sp-9) var(--sp-5); }
.snb-section.tight { padding: var(--sp-7) var(--sp-5); }
.snb-section.flush { padding: 0; }

/* Wordmark highlight (the yellow N) */
.snb-n-pop { color: var(--snb-yellow); display: inline-block; }