/* ============================================================
   AYAMFY DESIGN SYSTEM — colors & type
   Paste-ready tokens. Import from any page:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- BRAND FONTS (self-hosted) ---------- */
@font-face {
  font-family: "Archivo Black";
  src: url("fonts/ArchivoBlack-Regular.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.ttf") format("truetype-variations"),
       url("fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  --ay-yellow:  #FFD21F;   /* Primary brand — hero BG, highlights, marquee accent */
  --ay-red:     #E2231A;   /* CTAs, heat cues, logo wordmark */
  --ay-ink:     #1A1A1A;   /* Body text, marquee BG, dark sections */
  --ay-cream:   #FFF6D6;   /* Soft alt section BG, warm cards */
  --ay-green:   #2D5A3D;   /* Halal / trust / craft accents — sparse only */
  --ay-paper:   #FAFAFA;   /* Default section BG */
  --ay-hair:    #E8E8E8;   /* Dividers, card borders */
  --ay-mute:    #666666;   /* Secondary text */
  --ay-steel:   #B0B0B0;   /* Meta / micro text */
  --ay-white:   #FFFFFF;   /* Pure white — use sparingly */

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1: var(--ay-ink);
  --fg-2: var(--ay-mute);
  --fg-3: var(--ay-steel);
  --fg-on-ink: var(--ay-paper);
  --fg-on-yellow: var(--ay-ink);

  --bg-default: var(--ay-paper);
  --bg-brand:   var(--ay-yellow);
  --bg-warm:    var(--ay-cream);
  --bg-ink:     var(--ay-ink);
  --bg-white:   var(--ay-white);

  --border-hair: var(--ay-hair);
  --divider:     var(--ay-hair);

  --cta-bg: var(--ay-red);
  --cta-fg: var(--ay-white);
  --cta-bg-secondary: transparent;
  --cta-fg-secondary: var(--ay-ink);
  --cta-border-secondary: var(--ay-ink);
  --cta-bg-whatsapp: #25D366;

  --trust-halal: var(--ay-green);
  --focus-ring:  var(--ay-red);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Archivo Black", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --t-display-xl: clamp(56px, 8vw, 112px);
  --t-display-l:  clamp(40px, 5vw, 72px);
  --t-h2:         clamp(32px, 4vw, 56px);
  --t-h3:         26px;
  --t-body-l:     18px;
  --t-body:       16px;
  --t-body-s:     14px;
  --t-eyebrow:    13px;
  --t-caption:    11px;

  /* ---------- SPACING (4px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  --section-py:  clamp(80px, 10vw, 120px);
  --content-max: 1200px;
  --content-max-tabular: 1120px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- RADII ---------- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-card:  0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-hover: 0 4px 16px rgba(26, 26, 26, 0.08);
  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.20);

  /* ---------- MOTION ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-inout:  cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-xl,
h1.hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display-xl);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.display-l {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-display-l);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Inter-300 editorial alternative to display-l */
.display-l--editorial {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-display-l);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p, .body {
  font-size: var(--t-body);
  line-height: 1.6;
}

.body-l, p.lead {
  font-size: var(--t-body-l);
  line-height: 1.55;
}

.body-s, small {
  font-size: var(--t-body-s);
  line-height: 1.5;
  color: var(--fg-2);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  line-height: 1.3;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-caption);
  line-height: 1.3;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.mono, code {
  font-family: var(--font-mono);
}

/* Numeric price callouts — mono bold, tabular */
.price-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ay-yellow);
  color: var(--ay-ink);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

/* Accessibility — respect reduced motion by default */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}