/*
  HEYWOOD CHIPPY — DESIGN SYSTEM
  Token layer: colours, type scale, spacing, motion, elevation.
  Nothing here produces visible output — only custom properties and keyframes.
*/

:root {

  /* ── COLOUR PALETTE ─────────────────────────────── */
  --color-black:       #080d14;
  --color-navy:        #0d1f3c;
  --color-navy-mid:    #112847;
  --color-gold:        #c9a84c;
  --color-gold-light:  #e8c97a;
  --color-cream:       #f5efe0;
  --color-white:       #ffffff;
  --color-muted:       #8a9ab0;
  --color-success:     #22c55e;
  --color-error:       #ef4444;

  --color-gold-10:     rgba(201, 168, 76, 0.10);
  --color-gold-15:     rgba(201, 168, 76, 0.15);
  --color-gold-25:     rgba(201, 168, 76, 0.25);
  --color-gold-35:     rgba(201, 168, 76, 0.35);
  --color-gold-50:     rgba(201, 168, 76, 0.50);
  --color-white-06:    rgba(255, 255, 255, 0.06);
  --color-white-10:    rgba(255, 255, 255, 0.10);
  --color-white-20:    rgba(255, 255, 255, 0.20);
  --color-black-50:    rgba(8,  13, 20,  0.50);
  --color-black-90:    rgba(8,  13, 20,  0.90);
  --color-black-96:    rgba(8,  13, 20,  0.96);
  --color-black-97:    rgba(8,  13, 20,  0.97);
  --color-black-98:    rgba(8,  13, 20,  0.98);

  /* ── TYPOGRAPHY ─────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  clamp(1.75rem, 3.5vw, 2.25rem);
  --text-4xl:  clamp(2.25rem, 5vw,   3.5rem);
  --text-5xl:  clamp(3rem,   7vw,    5rem);
  --text-6xl:  clamp(3.5rem, 9vw,    6.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── SPACING (8-point grid) ──────────────────────── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px*/
  --sp-40: 10rem;     /* 160px*/

  /* ── BORDER RADIUS ───────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────── */
  --shadow-xs:        0 1px 3px rgba(0,0,0,0.25);
  --shadow-sm:        0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg:        0 8px 40px rgba(0,0,0,0.55);
  --shadow-xl:        0 16px 64px rgba(0,0,0,0.65);
  --shadow-gold:      0 0 0 1.5px var(--color-gold), 0 16px 48px rgba(201,168,76,0.20);
  --shadow-gold-glow: 0 8px 32px rgba(201,168,76,0.35);
  --shadow-inset-gold:inset 0 0 0 1px var(--color-gold-25);

  /* ── MOTION ──────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    350ms;
  --dur-slower:  500ms;
  --dur-slowest: 800ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-precise: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── LAYOUT ──────────────────────────────────────── */
  --max-width:     1200px;
  --max-width-sm:  640px;
  --max-width-md:  768px;
  --max-width-lg:  1024px;
  --max-width-xl:  1280px;

  --nav-height:    72px;
  --bar-height:    40px;
  --nav-total:     calc(var(--nav-height) + var(--bar-height));
  --scroll-offset: var(--nav-total);

  /* ── Z-INDEX ─────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-float:    20;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-nav:      300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-progress: 700;
}

/* ── ANIMATION KEYFRAMES ─────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wordReveal {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}

@keyframes bubbleOpen {
  from { opacity: 0; transform: scale(0.82) translateY(-10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

@keyframes bubbleClose {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.82) translateY(-10px); }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.6; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes chevronBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes progressPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

@keyframes openBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@keyframes grainShift {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(3%, 1%); }
  30% { transform: translate(-1%, 2%); }
  40% { transform: translate(2%, -1%); }
  50% { transform: translate(-3%, 3%); }
  60% { transform: translate(1%, -2%); }
  70% { transform: translate(-2%, 1%); }
  80% { transform: translate(3%, -3%); }
  90% { transform: translate(-1%, 2%); }
  100%{ transform: translate(0, 0); }
}

@keyframes lineGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ════════════════════════════════════════════════════════════
   MAXIMALIST LAYER — glassmorphism, aurora mesh, 3D, brand tokens
════════════════════════════════════════════════════════════ */

:root {

  /* ── FISH & CHIPS WARM PALETTE ───────────────────── */
  --color-amber:    #e8a33d;
  --color-batter:   #d98b2b;
  --color-vinegar:  #6b4a2b;
  --color-pea:      #7fae3a;
  --color-pea-soft: #a8cc63;

  --amber-15: rgba(232, 163, 61, 0.15);
  --amber-25: rgba(232, 163, 61, 0.25);
  --amber-40: rgba(232, 163, 61, 0.40);

  /* ── AURORA MESH STOPS ───────────────────────────── */
  --aurora-navy:   rgba(13, 31, 60, 0.95);
  --aurora-gold:   rgba(201, 168, 76, 0.40);
  --aurora-amber:  rgba(232, 163, 61, 0.30);
  --aurora-deep:   rgba(8, 13, 20, 0.95);
  --aurora-pea:    rgba(127, 174, 58, 0.14);

  /* ── GLASSMORPHISM ───────────────────────────────── */
  --glass-bg:        rgba(17, 40, 71, 0.42);
  --glass-bg-soft:   rgba(245, 239, 224, 0.045);
  --glass-bg-strong: rgba(8, 13, 20, 0.62);
  --glass-border:    rgba(201, 168, 76, 0.28);
  --glass-border-soft: rgba(255, 255, 255, 0.10);
  --glass-blur:      18px;
  --glass-blur-lg:   28px;
  --glass-shadow:    0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
  --glass-glow:      0 0 0 1px rgba(201,168,76,0.30), 0 20px 60px rgba(201,168,76,0.20), inset 0 1px 0 rgba(255,255,255,0.10);

  /* ── 3D ──────────────────────────────────────────── */
  --perspective: 1200px;
  --tilt-max:    10deg;

  /* ── DELIVERY BRAND TOKENS ───────────────────────── */
  --brand-justeat:       #ff8000;
  --brand-justeat-glow:  rgba(255, 128, 0, 0.45);
  --brand-deliveroo:     #00ccbc;
  --brand-deliveroo-glow:rgba(0, 204, 188, 0.45);
  --brand-ubereats:      #06c167;
  --brand-ubereats-glow: rgba(6, 193, 103, 0.45);
  --brand-orderyoyo:     #1f9d8a;
  --brand-orderyoyo-glow:rgba(31, 157, 138, 0.48);
}

/* ── AURORA / MESH KEYFRAMES ─────────────────────────── */

@keyframes auroraDrift {
  0%   { background-position: 0% 50%,   100% 50%,  50% 0%,   50% 100%; }
  25%  { background-position: 40% 20%,  60% 80%,   20% 60%,  80% 40%; }
  50%  { background-position: 100% 50%, 0% 50%,    50% 100%, 50% 0%; }
  75%  { background-position: 60% 80%,  40% 20%,   80% 40%,  20% 60%; }
  100% { background-position: 0% 50%,   100% 50%,  50% 0%,   50% 100%; }
}

@keyframes auroraSpin {
  from { transform: rotate(0deg)   scale(1.4); }
  to   { transform: rotate(360deg) scale(1.4); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

@keyframes floatY-sm {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--color-gold-25), 0 16px 50px rgba(201,168,76,0.15); }
  50%       { box-shadow: 0 0 0 1px var(--color-gold-50), 0 24px 70px rgba(201,168,76,0.32); }
}

@keyframes sheen {
  0%   { transform: translateX(-140%) skewX(-18deg); }
  60%, 100% { transform: translateX(260%) skewX(-18deg); }
}

@keyframes ctaRing {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes shimmerText {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes badgePing {
  0%   { transform: scale(1);   opacity: 0.8; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}