/* ============================================================
   Flora & Fauna Trading L.L.C — Design Tokens
   (from the Flora & Fauna Trading Design System)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap");

/* ---------- Aptos (default sans) ---------- */
@font-face { font-family: "Aptos"; src: url("fonts/Aptos.ttf")                 format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("fonts/Aptos-Italic.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("fonts/Aptos-SemiBold.ttf")        format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("fonts/Aptos-Bold.ttf")            format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Aptos Display (large headings) ---------- */
@font-face { font-family: "Aptos Display"; src: url("fonts/Aptos-Display.ttf")      format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Display"; src: url("fonts/Aptos-Display-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Aptos Mono (numerics, lot numbers) ---------- */
@font-face { font-family: "Aptos Mono"; src: url("fonts/Aptos-Mono.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand palette (olive / earth) ---------- */
  --olive-900: #2c3a17;
  --olive-800: #3d5121;
  --olive-700: #4f6a2b;
  --olive-600: #607f33;   /* PRIMARY — matches logotype */
  --olive-500: #7a9648;
  --olive-400: #9bb46a;
  --olive-300: #c0d2a0;
  --olive-200: #dde6c8;
  --olive-100: #eef2e0;

  /* ---------- Earth / clay (secondary) ---------- */
  --clay-900: #3a2614;
  --clay-700: #6b3e1d;
  --clay-600: #8a5026;
  --clay-500: #a96935;
  --clay-300: #d8b48a;
  --clay-100: #f1e3d0;

  /* ---------- Neutrals (warm) ---------- */
  --cream-50:  #fbf8f0;
  --cream-100: #f4efe2;
  --cream-200: #e8e0cc;
  --sand-300:  #c9bfa5;
  --stone-500: #8a8472;
  --stone-700: #4a4636;
  --ink-900:   #1f1d17;

  /* ---------- Semantic / utility ---------- */
  --halal-red:     #b23a2a;
  --halal-red-tint:#f6e5e0;
  --success:       #4f6a2b;
  --warning:       #b88421;
  --danger:        #b23a2a;
  --info:          #3a5b6e;

  /* ---------- Surface tokens ---------- */
  --bg-page:      var(--cream-50);
  --bg-surface:   #ffffff;
  --bg-elevated:  var(--cream-100);
  --bg-inverse:   var(--olive-800);

  --fg-primary:   var(--olive-900);
  --fg-secondary: var(--stone-700);
  --fg-muted:     var(--stone-500);
  --fg-on-dark:   var(--cream-50);
  --fg-brand:     var(--olive-600);

  --border-subtle:  var(--cream-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--olive-700);

  /* ---------- Type families ---------- */
  --font-display: "Aptos Display", "Aptos", system-ui, sans-serif;
  --font-body:    "Aptos", system-ui, -apple-system, sans-serif;
  --font-narrow:  "Aptos Narrow", "Aptos", system-ui, sans-serif;
  --font-serif:   "Aptos Serif", Georgia, serif;
  --font-arabic:  "Noto Naskh Arabic", "Amiri", serif;
  --font-mono:    "Aptos Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

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

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Shadows (warm, soft, low) ---------- */
  --shadow-xs: 0 1px 2px rgba(60, 50, 25, 0.06);
  --shadow-sm: 0 2px 6px rgba(60, 50, 25, 0.08);
  --shadow-md: 0 6px 18px rgba(60, 50, 25, 0.10);
  --shadow-lg: 0 18px 40px rgba(60, 50, 25, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 240, 0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.85, 0.4);
  --ease-out: cubic-bezier(0.15, 0.6, 0.2, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic type primitives
   ============================================================ */

.ff-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-700);
}

.ff-lead, .lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-secondary);
}

.ff-body, p, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-primary);
}

.ff-small, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-secondary);
}

.ff-arabic {
  font-family: var(--font-arabic);
  font-weight: 500;
  direction: rtl;
  line-height: 1.5;
}

.ff-mono { font-family: var(--font-mono); font-size: var(--fs-14); }