/* ==========================================================================
   GlobalPrep design tokens
   Single source of truth for /site, /portal and /design-system.
   Brand colours come from the GlobalPrep lockups (teal #08383b, amber #e8a33d, cream #fbf7f0, ink #0b1f26).
   The Food for Joe component CSS is reused, so the original variable names (--color-*, --font-family-*,
   --border-radius-*) are kept and remapped. Semantic aliases (--gp-*) are layered on top.
   Contrast (WCAG 2.1) checked for every text pair listed in DESIGN.md.
   ========================================================================== */

/* ── Fonts (self-hosted, SIL Open Font License) ────────────────────────── */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 102%;
}

:root {
  /* ── GlobalPrep brand palette ───────────────────────────────────────── */
  --gp-teal: #08383b;          /* primary ink, dark surfaces (lockup dots and panels) */
  --gp-teal-mid: #0d5c63;      /* secondary teal (GlobalPrep design system mark) */
  --gp-teal-soft: #2b5457;     /* icon strokes, hover on dark */
  --gp-amber: #e8a33d;         /* the fourth dot: primary action and highlights */
  --gp-amber-dark: #8a5a12;    /* amber as text on cream (5.5:1) */
  --gp-cream: #fbf7f0;         /* default light surface (lockup background) */
  --gp-ink: #0b1f26;           /* wordmark ink, body text on cream */

  /* ── Remapped Food for Joe names (component CSS reads these) ─────────── */
  --color-green: var(--gp-teal);
  --color-mid-green: var(--gp-teal-mid);
  --color-pale-green: #dce6e4;
  --color-light-green: #c9dccf;      /* sage complement (FFJ light green, softened) */
  --color-yellow: var(--gp-amber);
  --color-medium-yellow: #f5d6a3;    /* disabled action */
  --color-light-yellow: #fcefd9;
  --color-dark-yellow: var(--gp-amber-dark);
  --color-beige: var(--gp-cream);
  --color-light-beige: #fffdf9;      /* modal surface */
  --color-muted-beige: #f6efe3;
  --color-dark-beige: #efe6d8;       /* pricing and warm sections (kept from FFJ) */
  --hero-beige: #f3ece0;
  --color-white: #ffffff;
  --color-off-white: #ebebeb;
  --color-grey: #b4a99c;
  --color-brown: #c57959;
  --color-dark-brown: #2c1800;
  --color-terracotta: #a6401f;       /* error text on cream (5.8:1) */
  --color-salmon: #ff7c5f;
  --color-light-red: #ffdfd8;
  --color-blue: #e0edf5;             /* speech bubbles (kept from FFJ) */
  --color-success: #107956;
  --color-error: #c2391b;
  --color-error-dark: #a61c1c;
  --color-input-error: var(--color-terracotta);
  --color-input-error-light: var(--color-salmon);
  --color-text-muted: rgba(11, 31, 38, 0.6);

  /* ── Semantic aliases ────────────────────────────────────────────────── */
  --gp-text: var(--gp-teal);
  --gp-text-body: var(--gp-ink);
  --gp-text-inverse: var(--gp-cream);
  --gp-text-accent: var(--gp-amber-dark);
  --gp-text-muted: var(--color-text-muted);
  --gp-surface: var(--color-white);
  --gp-surface-soft: var(--gp-cream);
  --gp-surface-warm: var(--color-dark-beige);
  --gp-surface-hero: var(--hero-beige);
  --gp-surface-inverse: var(--gp-teal);
  --gp-action: var(--gp-amber);
  --gp-action-hover: #f0c47a;
  --gp-action-disabled: var(--color-medium-yellow);
  --gp-border: rgba(8, 56, 59, 0.3);
  --gp-border-subtle: rgba(8, 56, 59, 0.1);
  --gp-dot: #e6dfd7;
  --gp-dot-active: var(--gp-teal);
  --gp-whatsapp: #25d366;
  --gp-whatsapp-dark: #075e54;
  --gp-telegram: #229ed9;

  /* Legacy aliases still referenced by ported CSS */
  --ffj-text: var(--gp-text);
  --ffj-text-inverse: var(--color-white);
  --ffj-text-accent: var(--gp-text-accent);
  --ffj-text-muted: var(--gp-text-muted);
  --ffj-surface: var(--gp-surface);
  --ffj-surface-soft: var(--gp-surface-soft);
  --ffj-surface-warm: var(--gp-surface-warm);
  --ffj-surface-hero: var(--gp-surface-hero);
  --ffj-surface-inverse: var(--gp-surface-inverse);
  --ffj-action: var(--gp-action);
  --ffj-action-hover: var(--gp-action-hover);
  --ffj-action-disabled: var(--gp-action-disabled);
  --ffj-border: var(--gp-border);
  --ffj-border-subtle: var(--gp-border-subtle);
  --ffj-dot: var(--gp-dot);
  --ffj-dot-active: var(--color-grey);
  --ffj-whatsapp: var(--gp-whatsapp);
  --ffj-whatsapp-dark: var(--gp-whatsapp-dark);

  /* ── Typography ──────────────────────────────────────────────────────── */
  /* Fraunces is variable: "light" text uses the regular instance, "medium" text is pushed to 560
     through font-variation-settings (see --gp-medium-axes), soft and slightly wonky like the wordmark. */
  --font-family-serif-light: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-family-serif-medium: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-family-handwritten: "Caveat", "Segoe Print", cursive;
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gp-light-axes: "wght" 360, "opsz" 24, "SOFT" 50, "WONK" 0;
  --gp-medium-axes: "wght" 560, "opsz" 48, "SOFT" 100, "WONK" 1;

  --ffj-font-display: clamp(35px, 5vw, 62px);
  --ffj-font-script: clamp(58px, 8vw, 102px);
  --ffj-font-headline: clamp(26px, 4vw, 44px);
  --ffj-font-label: 48px;
  --ffj-font-title: 40px;
  --ffj-font-subtitle: clamp(20px, 3vw, 24px);
  --ffj-font-lead: 24px;
  --ffj-font-body-lg: 20px;
  --ffj-font-body: clamp(15px, 2vw, 18px);
  --ffj-font-button: 18px;
  --ffj-font-small: 15px;
  --ffj-font-caption: 13px;
  --ffj-font-micro: 12px;
  --ffj-font-eyebrow: 14px;

  --ffj-leading-tight: 1.04;
  --ffj-leading-heading: 1.2;
  --ffj-leading-body: 1.4;
  --ffj-tracking-heading: -0.02em;
  --ffj-tracking-eyebrow: 0.09em;
  --ffj-tracking-badge: 0.05em;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --ffj-space-1: 4px;
  --ffj-space-2: 8px;
  --ffj-space-3: 10px;
  --ffj-space-4: 12px;
  --ffj-space-5: 16px;
  --ffj-space-6: 20px;
  --ffj-space-7: 24px;
  --ffj-space-8: 30px;
  --ffj-space-9: 40px;
  --ffj-space-10: 50px;
  --ffj-space-11: 60px;
  --ffj-space-12: 80px;
  --ffj-section-y: 60px;
  --ffj-section-y-lg: 82px;
  --ffj-gutter: 20px;
  --ffj-gutter-lg: 80px;
  --ffj-container: 1440px;
  --ffj-carousel-gap: 30px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --border-radius-button: 500px;
  --border-radius-input: 40px;
  --border-radius-textarea: 20px;
  --border-radius-modal: 32px;
  --border-radius-footer: 24px;
  --ffj-radius-xs: 3px;
  --ffj-radius-sm: 5px;
  --ffj-radius-md: 8px;
  --ffj-radius-lg: 10px;
  --gp-radius-card: 20px;            /* GlobalPrep cards and the signage panel corner */
  --ffj-radius-pill: var(--border-radius-button);
  --ffj-radius-round: 50%;

  /* ── Elevation ───────────────────────────────────────────────────────── */
  --ffj-shadow-xs: 1px 1px 0 0 rgba(0, 0, 0, 0.1);
  --ffj-shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.1);
  --ffj-shadow-md: 0 4px 10px 0 rgb(0 0 0 / 15%);
  --ffj-shadow-lg: 0 3px 10px 0 rgb(0 0 0 / 20%);
  --ffj-shadow-drawer: 0 0 20px rgb(8 56 59 / 40%);
  --ffj-backdrop: rgba(11, 31, 38, 0.45);
  --ffj-backdrop-blur: 5px;

  /* ── Motion (kept from Food for Joe) ─────────────────────────────────── */
  --ffj-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ffj-ease-snappy: cubic-bezier(0.23, 1, 0.32, 1);
  --ffj-ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ffj-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ffj-ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);
  --gp-ease-crawl: cubic-bezier(0.45, 0, 0.55, 1);   /* caterpillar segments */
  --gp-ease-flutter: cubic-bezier(0.37, 0, 0.63, 1); /* butterfly wings */
  --ffj-duration-fast: 0.2s;
  --ffj-duration-base: 0.3s;
  --ffj-duration-moderate: 0.6s;
  --ffj-duration-slow: 0.9s;
  --ffj-duration-carousel: 1.5s;
  --gp-duration-crawl: 1.2s;
  --gp-duration-emerge: 1.4s;

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --ffj-z-base: 1;
  --ffj-z-header: 2;
  --ffj-z-menu: 2;
  --ffj-z-toast: 21;
  --ffj-z-floating: 9999;

  --scroll-behavior: smooth;
}

@media (min-width: 960px) {
  :root {
    --border-radius-modal: 40px;
    --border-radius-footer: 40px;
  }
}