/* =========================================================================
   Galifar Delivery — Design Tokens
   Colors & Typography
   ========================================================================= */

/* Body + mono are still Google Fonts; display is the brand-supplied Space Grotesk. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---------- Brand display: Space Grotesk (local files) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Variable for fluid display weights (300–700). */
@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('fonts/SpaceGrotesk-Variable.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-Variable.ttf') format('truetype');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary green — the operational accent. Used sparingly for CTAs, highlights, brand marks. */
  --gd-green-50:  #effaf4;
  --gd-green-100: #d6f0e2;
  --gd-green-200: #aee0c5;
  --gd-green-300: #82cca5;
  --gd-green-400: #5bac8b;   /* ⭐ primary brand accent */
  --gd-green-500: #4a9577;
  --gd-green-600: #3a7a61;
  --gd-green-700: #2f604c;
  --gd-green-800: #25483a;
  --gd-green-900: #1b332a;

  /* Ink — pure black is reserved for the logo lockup. UI uses softened ink. */
  --gd-ink-1000: #000000;
  --gd-ink-900:  #0e1413;
  --gd-ink-800:  #1a2220;
  --gd-ink-700:  #2a3431;

  /* Neutrals — light dominant palette */
  --gd-paper:    #ffffff;
  --gd-paper-2:  #f7f8f6;   /* subtle warm-cool off-white */
  --gd-paper-3:  #eef0ed;
  --gd-line:     #dde1dc;   /* hairlines / borders */
  --gd-line-2:   #c6cbc4;
  --gd-mute:     #6b7470;   /* secondary text */
  --gd-mute-2:   #8a928d;   /* tertiary text */

  /* Accent — used for energy / motion / urgency. Sparingly. */
  --gd-amber:    #e9b949;   /* warning, caution */
  --gd-rouge:    #c8483a;   /* error, "diesel s'enlise" */
  --gd-sky:      #4a8fb8;   /* info, "Paris/Bordeaux" maps */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:          var(--gd-paper);
  --bg-soft:     var(--gd-paper-2);
  --bg-mute:     var(--gd-paper-3);
  --bg-invert:   var(--gd-ink-900);

  --fg:          var(--gd-ink-900);
  --fg-soft:     var(--gd-ink-800);
  --fg-mute:     var(--gd-mute);
  --fg-mute-2:   var(--gd-mute-2);
  --fg-invert:   var(--gd-paper);

  --accent:      var(--gd-green-400);
  --accent-hover:var(--gd-green-500);
  --accent-soft: var(--gd-green-100);
  --accent-ink:  var(--gd-green-700);

  --border:      var(--gd-line);
  --border-strong: var(--gd-line-2);

  --success:     var(--gd-green-500);
  --warning:     var(--gd-amber);
  --danger:      var(--gd-rouge);
  --info:        var(--gd-sky);

  /* ---------- TYPE FAMILIES ---------- */
  /* Display: Space Grotesk — Galifar's brand display face (provided as local TTFs).
     Geometric, slight humanist warmth, single weight axis 300–700.
     NOTE: Space Grotesk has no native italics — we use a CSS oblique skew (-8deg)
     to create the italic accent that mirrors the logo. See .gd-italic helper. */
  --font-display: 'Space Grotesk Variable', 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em;   /* used for ALL-CAPS labels, eyebrows */
  /* ---------- SPACING ---------- */
  --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;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Galifar uses minimal elevation — flat-with-borders is the default.
     Shadows reserved for lifted CTAs and floating menus. */
  --shadow-1: 0 1px 2px rgba(14, 20, 19, 0.04), 0 1px 1px rgba(14, 20, 19, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 20, 19, 0.06), 0 1px 2px rgba(14, 20, 19, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 20, 19, 0.10), 0 2px 6px rgba(14, 20, 19, 0.05);
  --shadow-green: 0 8px 24px rgba(91, 172, 139, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* =========================================================================
   Semantic typography — drop these classes in to apply the system.
   ========================================================================= */

.gd-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.gd-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 84px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

/* Space Grotesk has no italic file — synthesize via skew + accent color.
   Use <em> in display text, or apply .gd-italic to any inline. */
.gd-h1 em,
.gd-h2 em,
.gd-h3 em,
.gd-display em,
.gd-italic {
  font-style: normal;
  display: inline-block;
  transform: skewX(-8deg);
  color: var(--accent);
  font-weight: 700;
}

.gd-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.gd-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.gd-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.gd-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-soft);
}

.gd-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-soft);
}

.gd-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-mute);
}

.gd-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

/* Wordmark-style display: skewed Space Grotesk Bold, mimics the logo */
.gd-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-block;
  transform: skewX(-8deg);
}