/* ================================================================
   Marcus design tokens.
   Spacing, type, colour, motion, shadow, radius — single source of
   truth for every page in the Marcus brand voice.
   ================================================================ */

:root {
    /* ---- raw palette (for primitives + accents) ---- */
    --c-neutral-50:  #fafafa;
    --c-neutral-100: #f5f5f5;
    --c-neutral-200: #e5e5e5;
    --c-neutral-300: #d4d4d4;
    --c-neutral-400: #a1a1a1;
    --c-neutral-500: #737373;
    --c-neutral-600: #525252;
    --c-neutral-700: #404040;
    --c-neutral-800: #262626;
    --c-neutral-900: #1f1f1d;

    --c-orange-100: #ffe6dd;
    --c-orange-400: #ed642f;
    --c-orange-500: #ce4700;

    --c-pink-300: #ff87b1;
    --c-pink-400: #f75095;
    --c-pink-500: #dc207a;

    --c-purple-400: #a475ff;
    --c-purple-500: #8e48ff;

    --c-blue-300: #749df7;
    --c-blue-400: #4279ff;
    --c-blue-500: #1f55f1;

    --c-emerald-400: #00d294;
    --c-emerald-500: #00bb7f;

    /* ---- semantic — light theme is default, dark via .theme-dark ---- */
    --bg:                 hsl(45 40% 98%);
    --bg-card:            hsl(45 40% 98%);
    --bg-elevated:        hsl(0 0% 100%);
    --bg-muted:           hsl(42 38% 95%);
    --bg-muted-2:         hsl(45 17% 91%);
    --fg:                 hsl(0 0% 11%);
    --fg-muted:           hsl(60 1% 37%);
    --fg-muted-subtle:    hsl(60 1% 55%);
    --border:             hsl(45 17% 91%);
    --border-strong:      hsl(60 1% 25%);
    --ring:               hsl(0 0% 11%);

    --accent-primary:           hsl(225 88% 53%);
    --accent-primary-fg:        hsl(208 100% 97%);
    --accent-tint:              hsl(216 73% 91%);
    --accent-tint-fg:           hsl(214 75% 39%);

    --success:                  hsl(142 72% 29%);
    --success-fg:               hsl(138 76% 97%);
    --success-tint:             hsl(137 52% 88%);
    --warning:                  hsl(25 98% 44%);
    --warning-fg:               hsl(42 100% 96%);
    --destructive:              hsl(0 95% 42%);
    --destructive-fg:           hsl(0 100% 97%);

    /* ---- gradient stops for the hero pulse ---- */
    --grad-pink:   #ff638c;
    --grad-orange: #ffaa5a;
    --grad-blue:   #7896ff;
    --grad-purple: #a475ff;

    /* ---- typography ---- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --fs-xs:    12px;
    --fs-sm:    13px;
    --fs-base:  15px;
    --fs-md:    16px;
    --fs-lg:    18px;
    --fs-xl:    22px;
    --fs-2xl:   28px;
    --fs-3xl:   38px;
    --fs-4xl:   54px;
    --fs-5xl:   72px;

    --lh-tight: 1.05;
    --lh-snug:  1.2;
    --lh-base:  1.5;
    --lh-relaxed: 1.65;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --tracking-tight: -0.03em;
    --tracking-snug:  -0.015em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em;

    /* ---- spacing scale (4-base) ---- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* ---- container widths ---- */
    --container:        1200px;
    --container-narrow: 760px;
    --container-text:   620px;

    /* ---- radii ---- */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-2xl: 28px;
    --r-pill: 9999px;

    /* ---- shadows ---- */
    --sh-1: 0 1px 2px rgba(15,15,15,0.04);
    --sh-2: 0 4px 12px rgba(15,15,15,0.06);
    --sh-3: 0 10px 30px rgba(15,15,15,0.08);
    --sh-4: 0 24px 60px rgba(15,15,15,0.12);
    --sh-input: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px rgba(15,15,15,0.06);

    /* ---- motion ---- */
    --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast:    150ms;
    --t-base:    220ms;
    --t-slow:    400ms;
    --t-slower:  700ms;

    /* ---- z-index ---- */
    --z-bg:      0;
    --z-base:    1;
    --z-header:  50;
    --z-overlay: 80;
    --z-modal:   100;
    --z-toast:   200;
}

/* dark variant — flipped for theme-dark on the body */
.theme-dark {
    --bg:               hsl(0 0% 6%);
    --bg-card:          hsl(0 0% 9%);
    --bg-elevated:      hsl(0 0% 11%);
    --bg-muted:         hsl(60 3% 15%);
    --bg-muted-2:       hsl(60 1% 25%);
    --fg:               hsl(45 40% 98%);
    --fg-muted:         hsl(40 9% 75%);
    --fg-muted-subtle:  hsl(40 9% 55%);
    --border:           hsl(60 3% 15%);
    --border-strong:    hsl(60 1% 25%);
    --ring:             hsl(47 10% 83%);
    --accent-tint:      hsl(217 33% 22%);
    --accent-tint-fg:   hsl(217 100% 72%);
}