/* ============================================================
   Zest UI — Design Tokens
   Extracted 2026-05-28

   Import this first, then components.css.
   All tokens are CSS custom properties on :root.
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Space+Grotesk:wght@300;400;500;600;700&family=Lato:wght@300;400;700&display=swap');

/* ── Root Tokens ─────────────────────────────────────────── */
:root {
  /* ── Colour palette ───────────────────────────────────── */
  --color-paper:        #fdfcf7;   /* warm off-white background */
  --color-ink:          #0a0a0a;   /* near-black for text & borders */

  /* Brand accents */
  --color-lime:         #c3f53c;   /* electric lime — primary CTA */
  --color-lime-deep:    #7fb800;   /* deeper lime for pressed states */
  --color-pink:         #ff4ecb;   /* hot pink — secondary accent */
  --color-purple:       #7a5cff;   /* purple — tertiary accent / ring */
  --color-orange:       #ff8a2b;   /* warm orange */
  --color-cyan:         #2ee3f0;   /* bright cyan */
  --color-yellow:       #ffe347;   /* sunny yellow */
  --color-red:          #ff4646;   /* destructive / error red */

  /* Soft pastel variants */
  --color-pink-soft:    #ffb3e6;
  --color-purple-soft:  #c9bdff;
  --color-orange-soft:  #ffd9a8;
  --color-cyan-soft:    #b7f3f7;

  /* ── Semantic tokens ──────────────────────────────────── */
  --background:         var(--color-paper);
  --foreground:         var(--color-ink);

  --primary:            var(--color-lime);
  --primary-foreground: var(--color-ink);

  --secondary:          var(--color-pink);
  --secondary-foreground: var(--color-ink);

  --accent:             var(--color-purple);
  --accent-foreground:  var(--color-paper);

  --muted:              #f4f1e6;   /* warm light grey */
  --muted-foreground:   #4a4a4a;

  --card:               #ffffff;
  --card-foreground:    var(--color-ink);

  --popover:            #ffffff;
  --popover-foreground: var(--color-ink);

  --destructive:        var(--color-red);
  --destructive-foreground: #ffffff;

  --border:             var(--color-ink);
  --input:              var(--color-ink);
  --ring:               var(--color-purple);

  /* ── Border & Shadow ──────────────────────────────────── */
  --border-width:       3px;       /* signature thick border */
  --border-width-lg:    4px;       /* large cards */
  --border-width-xl:    5px;       /* hero phone mockup */

  /* Sticker shadows — offset shadow with ink color */
  --shadow-sticker-sm:  2px 2px 0 0 var(--color-ink);
  --shadow-sticker:     4px 4px 0 0 var(--color-ink);
  --shadow-sticker-lg:  6px 6px 0 0 var(--color-ink);

  /* ── Radius ───────────────────────────────────────────── */
  --radius:             1.25rem;   /* 20px — base */
  --radius-sm:          0.5rem;    /* 8px */
  --radius-md:          1rem;      /* 16px */
  --radius-lg:          1.5rem;    /* 24px */
  --radius-xl:          2rem;      /* 32px */
  --radius-2xl:         2.25rem;   /* 36px */
  --radius-3xl:         3rem;      /* 48px */
  --radius-full:        9999px;    /* pill / circle */

  /* ── Typography ───────────────────────────────────────── */
  --font-display:       'Bagel Fat One', system-ui, sans-serif;
  --font-body:          'Space Grotesk', system-ui, sans-serif;
  --font-secondary:     'Lato', system-ui, sans-serif;

  --font-size-xs:       0.75rem;   /* 12px */
  --font-size-sm:       0.875rem;  /* 14px */
  --font-size-base:     1rem;      /* 16px */
  --font-size-lg:       1.125rem;  /* 18px */
  --font-size-xl:       1.25rem;   /* 20px */
  --font-size-2xl:      1.5rem;    /* 24px */
  --font-size-3xl:      2rem;      /* 32px */
  --font-size-4xl:      3rem;      /* 48px */
  --font-size-5xl:      5.5rem;    /* 88px */

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

  --line-height-tight:  0.95;
  --line-height-snug:   1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-wide:  0.05em;

  /* ── 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 */

  /* ── Transitions ──────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 150ms;
  --duration-slow:   300ms;
  --ease-default:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dark Mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --color-paper:        #111110;   /* very dark warm charcoal */
  --color-ink:          #f5f4ef;   /* warm off-white on dark */

  --background:         #111110;
  --foreground:         #f5f4ef;

  --muted:              #1e1e1b;
  --muted-foreground:   #9a9994;

  --card:               #1a1a18;
  --card-foreground:    #f5f4ef;

  --popover:            #1a1a18;
  --popover-foreground: #f5f4ef;

  --border:             #f5f4ef;
  --input:              #f5f4ef;

  /* Keep brand accents vivid — they pop on dark */
  --color-lime:         #c3f53c;
  --color-lime-deep:    #a8d62e;
  --color-pink:         #ff4ecb;
  --color-purple:       #8b72ff;
  --color-cyan:         #2ee3f0;
  --color-yellow:       #ffe347;
  --color-orange:       #ff8a2b;

  --shadow-sticker-sm:  2px 2px 0 0 var(--color-ink);
  --shadow-sticker:     4px 4px 0 0 var(--color-ink);
  --shadow-sticker-lg:  6px 6px 0 0 var(--color-ink);
}

/* ── Keyframe Animations ─────────────────────────────────── */
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg);  }
}

@keyframes wobble {
  0%, 100% { transform: translateY(0px)  rotate(0deg);  }
  25%       { transform: translateY(-6px) rotate(-2deg); }
  75%       { transform: translateY(-2px) rotate(2deg);  }
}

@keyframes spin-slow {
  100% { transform: rotate(360deg); }
}

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

@keyframes notif-pop {
  0%,  70%, 100% { transform: rotate(-1deg) scale(1);    }
  4%             { transform: rotate(-3deg) scale(0.94); }
  10%            { transform: rotate(2deg)  scale(1.08); }
  16%            { transform: rotate(-1deg) scale(1);    }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}