/* ─── JangJelly Design Tokens ─────────────────────────────── */
:root {
    /* Colors */
    --jj-rose: #E8C4C8;
    --jj-rose-light: #F2DADD;
    --jj-rose-lighter: #F8EDEF;
    --jj-rose-dark: #D4A8AD;
    --jj-ivory: #FDF6F0;
    --jj-ivory-dark: #F5EBE0;
    --jj-mauve: #B48B94;
    --jj-mauve-dark: #9A7079;
    --jj-mauve-light: #C9A5AC;
    --jj-charcoal: #3A2E30;
    --jj-charcoal-light: #5C4D50;
    --jj-charcoal-lighter: #7A6B6E;
    --jj-gold: #D4A574;
    --jj-gold-light: #E8C9A6;
    --jj-white: #FFFFFF;
    --jj-black: #1A1416;
    --jj-error: #C45B5B;
    --jj-error-light: #F5E0E0;
    --jj-success: #7BA587;
    --jj-success-light: #E0F0E4;
    --jj-info: #7B9EB5;

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: 'Cormorant Garamond', Georgia, serif;

    /* Fluid type scale */
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    --text-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.8rem);
    --text-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
    --text-display: clamp(2.8rem, 2rem + 4vw, 4.5rem);

    /* Line heights */
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Spacing */
    --space-2xs: 0.125rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-section: clamp(4rem, 3rem + 5vw, 8rem);

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 720px;
    --container-wide: 1440px;
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
    --header-height: 72px;
    --announcement-height: 40px;

    /* Borders & Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(58, 46, 48, 0.04);
    --shadow-sm: 0 1px 3px rgba(58, 46, 48, 0.06), 0 1px 2px rgba(58, 46, 48, 0.04);
    --shadow-md: 0 4px 12px rgba(58, 46, 48, 0.08);
    --shadow-lg: 0 8px 30px rgba(58, 46, 48, 0.12);
    --shadow-xl: 0 16px 50px rgba(58, 46, 48, 0.16);
    --shadow-lift: 0 12px 40px rgba(58, 46, 48, 0.15);
    --shadow-glow: 0 0 30px rgba(232, 196, 200, 0.4);
    --shadow-glow-strong: 0 0 50px rgba(232, 196, 200, 0.6);
    --shadow-inner: inset 0 2px 4px rgba(58, 46, 48, 0.06);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 800ms;
    --duration-slowest: 1200ms;

    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 250;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-top: 999;

    /* Glassmorphism */
    --glass-bg: rgba(253, 246, 240, 0.85);
    --glass-blur: blur(20px);
    --glass-border: 1px solid rgba(232, 196, 200, 0.3);
}

/* Dark mode prep (optional future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Can be extended later */
    }
}