/* ============================================================
   EZYBITE — Design Tokens
   ============================================================ */

:root {
  /* ---- Colors (Hallmark Tinted Palette) ---- */
  --color-bg:          #F8FAFC;
  --color-white:       #FCFDFE;
  --color-soft-blue:   #EAF3F9;
  --color-brand-blue:  #62B5E5;
  --color-deep-blue:   #10243A;
  --color-brand-red:   #E8443E;
  --color-muted:       #5C6B78;
  --color-border:      #DCE5EC;

  /* Extended palette */
  --color-deep-blue-90: rgba(16, 36, 58, 0.9);
  --color-deep-blue-70: rgba(16, 36, 58, 0.7);
  --color-deep-blue-50: rgba(16, 36, 58, 0.5);
  --color-deep-blue-10: rgba(16, 36, 58, 0.1);
  --color-brand-red-hover: #d63a34;
  --color-brand-red-10: rgba(232, 68, 62, 0.1);
  --color-brand-blue-10: rgba(98, 181, 229, 0.1);
  --color-overlay:     rgba(16, 36, 58, 0.6);

  /* ---- Typography (Modern Luxury Gourmet) ---- */
  --font-family:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-product:      'Playfair Display', Georgia, serif;
  --font-mono:         'JetBrains Mono', monospace;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold: 800;

  /* Type scale */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */
  --text-hero:  clamp(2.75rem, 5vw, 4.5rem);

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Tracking */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* Numerics */
  --font-numeric: tabular-nums;

  /* ---- Spacing ---- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ---- Layout ---- */
  --max-width:     1440px;
  --content-width: 1320px;
  --gutter:        clamp(1.25rem, 3vw, 3rem);

  /* ---- Border Radius ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(16, 36, 58, 0.04), 0 1px 2px rgba(16, 36, 58, 0.03);
  --shadow-md:   0 4px 12px rgba(16, 36, 58, 0.06), 0 2px 4px rgba(16, 36, 58, 0.03);
  --shadow-lg:   0 8px 24px rgba(16, 36, 58, 0.08), 0 4px 8px rgba(16, 36, 58, 0.04);
  --shadow-xl:   0 16px 48px rgba(16, 36, 58, 0.1), 0 8px 16px rgba(16, 36, 58, 0.05);
  --shadow-card: 0 2px 8px rgba(16, 36, 58, 0.05);

  /* ---- Transitions ---- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;
  --duration-slowest: 900ms;

  /* ---- Z-index ---- */
  --z-base:     1;
  --z-above:    10;
  --z-nav:      100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-loader:   9999;
}