/* ============================================================
   EVERYDAY EATS — design tokens
   Mirrors PantryPal/Theme/Brand.swift + Typography.swift so the
   landing page and the iOS app stay visually aligned.

   Source of truth: /Users/gregorytolmochow/pantrypal/PantryPal/Theme/
   Edit there first, then bring values across.
   ============================================================ */

:root {
  /* ─── Color · core brand (rust/sienna anchor) ─── */
  --ee-primary:        #8F4A38;          /* sRGB(0.56,0.29,0.22) — Brand.primary */
  --ee-primary-light:  #E6A88F;          /* Brand.primaryLight */
  --ee-primary-muted:  #856B61;          /* Brand.primaryMuted */
  --ee-primary-deep:   #5C2C22;          /* Brand.primaryDeep */

  /* ─── Color · food-grounded accents ─── */
  --ee-terracotta:       #B86152;        /* Brand.terracotta */
  --ee-terracotta-light: #E6AD94;        /* Brand.terracottaLight */
  --ee-olive:            #617A5C;        /* Brand.olive */
  --ee-olive-light:      #859E7A;        /* Brand.oliveLight */
  --ee-seafoam:          #51C2A3;        /* Brand.seafoam */
  --ee-seafoam-deep:     #389485;        /* Brand.seafoamDark */
  --ee-coral:            #F58C7A;        /* Brand.coral */
  --ee-apricot:          #FFD1B8;        /* Brand.apricot */
  --ee-butter:           #FFF4DB;        /* Brand.butter */

  /* ─── Color · paper ─── */
  --ee-linen:  #FCF7ED;                  /* Brand.linen — base bg */
  --ee-cream:  #F5ECDB;                  /* Brand.cream — second-tier bg */
  --ee-paper:  #EFE3CC;                  /* Brand.paper-deep — chip / map base */
  --ee-card:   #FFFFFFEE;                /* Brand.card */

  /* ─── Color · ink ─── */
  --ee-ink:        #1F1817;              /* Brand.textPrimary */
  --ee-ink-soft:   #4A3F3D;              /* Brand.textSecondary */
  --ee-ink-muted:  #8A7E7C;              /* Brand.textTertiary */

  /* ─── Hairlines · rgba so they sit on any paper ─── */
  --ee-hair:    rgba(31, 24, 23, 0.12);
  --ee-hair-soft: rgba(31, 24, 23, 0.06);
  --ee-shadow-sm: 0 12px 24px -16px rgba(60, 34, 20, 0.35);
  --ee-shadow-md: 0 20px 40px -24px rgba(60, 34, 20, 0.18);
  --ee-shadow-lg: 0 60px 100px -50px rgba(60, 34, 20, 0.25);
  --ee-shadow-xl: 0 60px 120px -40px rgba(60, 34, 20, 0.45);

  /* ─── Typography ─── */
  --ee-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ee-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --ee-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ee-fvar-display: "opsz" 144;
  --ee-fvar-editorial: "opsz" 96;

  /* ─── Spacing · 4px base, named t-shirt sizes ─── */
  --ee-space-1:  4px;
  --ee-space-2:  8px;
  --ee-space-3:  12px;
  --ee-space-4:  16px;
  --ee-space-5:  20px;
  --ee-space-6:  24px;
  --ee-space-8:  32px;
  --ee-space-10: 40px;
  --ee-space-12: 48px;
  --ee-space-16: 64px;
  --ee-space-20: 80px;
  --ee-space-24: 96px;

  /* ─── Radius ─── */
  --ee-radius-xs: 8px;
  --ee-radius-sm: 12px;
  --ee-radius-md: 16px;
  --ee-radius-lg: 22px;
  --ee-radius-xl: 28px;
  --ee-radius-full: 999px;

  /* ─── Motion · curves & durations ─── */
  --ee-ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);   /* primary easing */
  --ee-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ee-ease-spring: cubic-bezier(0.32, 1.6, 0.4, 1);  /* tiny overshoot */
  --ee-ease-anticipate: cubic-bezier(0.5, -0.4, 0.3, 1.4);

  --ee-dur-fast:    180ms;
  --ee-dur-base:    300ms;
  --ee-dur-slow:    600ms;
  --ee-dur-reveal:  1100ms;
  --ee-dur-marquee: 90s;

  /* Stagger windows · used by anime.js on letter cascades and reveal grids */
  --ee-stagger-tight:  60ms;
  --ee-stagger-base:   90ms;
  --ee-stagger-loose:  140ms;

  /* ─── Z-index scale ─── */
  --ee-z-nav:    100;
  --ee-z-modal:  200;
  --ee-z-toast:  300;
}

/* Reduced motion: collapse animations to instant transitions globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ee-dur-fast: 0ms;
    --ee-dur-base: 0ms;
    --ee-dur-slow: 0ms;
    --ee-dur-reveal: 0ms;
    --ee-dur-marquee: 0s;
  }
}

/* ────────────────────────────────────────────────────────────
   Legacy aliases — the page was authored against these names
   before tokens were extracted. Keep them so `styles.css` and
   any inline references continue to resolve.
   ──────────────────────────────────────────────────────────── */
:root {
  --linen:       var(--ee-linen);
  --cream:       var(--ee-cream);
  --paper:       var(--ee-paper);
  --sienna:      var(--ee-primary);
  --siennaDeep:  var(--ee-primary-deep);
  --terracotta:  var(--ee-terracotta);
  --olive:       var(--ee-olive);
  --butter:      var(--ee-butter);
  --apricot:     var(--ee-apricot);
  --ink:         var(--ee-ink);
  --inkSoft:     var(--ee-ink-soft);
  --inkMuted:    var(--ee-ink-muted);
  --hair:        var(--ee-hair);
}