/* =========================================================
   the Ice Cream Caboose, v2
   Design System Tokens
   ========================================================= */

:root {
    /* Color Palette */
    --ink: #1d3557;
    --ink-soft: #44597a;
    --caboose: #e63946;
    --caboose-deep: #b81d2a;
    --cherry: #ff5d8f;
    --mint: #8bc4b4;
    --sun: #f4d35e;
    --cream: #fff8ee;
    --cream-deep: #fbe9cf;
    --paper: #fffaf3;
    --rail: #d6b58a;
    --soot: #2d2a32;

    /* Grid Dots & Ambient Gradients */
    --dot-color: var(--ink);
    --bg-gradient: none;

    /* Shadows */
    --shadow-soft: 0 6px 24px rgba(29, 53, 87, 0.08);
    --shadow: 0 10px 28px rgba(29, 53, 87, 0.08); /* Used in menu.css */
    --shadow-card: 0 12px 30px rgba(29, 53, 87, 0.12);
    --shadow-lift: 0 18px 42px rgba(29, 53, 87, 0.18);

    /* Radiuses & Layout Constants */
    --radius-card: 22px;
    --radius-pill: 999px;
    --maxw: 1140px;

    /* Typography stacks */
    --serif: 'Fraunces', Georgia, serif;
    --display: 'Fredoka One', 'Fraunces', serif;
    --body: 'Inter', 'Open Sans', system-ui, sans-serif;
    --hand: 'Kalam', 'Caveat', cursive;
}

/* =========================================================
   Soot & Cocoa Dark Mode Overrides
   ========================================================= */
:root[data-theme="dark"] {
    --cream: #180c0e;             /* Rich chocolate cherry / deep velvet burgundy */
    --paper: #281518;             /* Warm dark chocolate raspberry truffle */
    --cream-deep: #100607;        /* Deeper warm dark cocoa */
    --soot: #0a0304;              /* Deepest velvet black shadow */
    --ink: #fff2e6;               /* Warm peachy off-white */
    --ink-soft: #dac2ba;          /* Soft warm cocoa-peach text */
    --rail: #724e52;              /* Warm raspberry-tinted brown wood */
    --caboose: #ff4d66;           /* Vibrant glowing crimson-cherry red */
    --caboose-deep: #ff2a47;      /* Rich deeper crimson red */
    --mint: #a2e8dd;              /* Fresh sweet mint green */
    --sun: #ffdb70;               /* Bright warm honey sunshine yellow */
    --cherry: #ff99bc;            /* Sweet strawberry pink */
    --dot-color: var(--sun);
    --bg-gradient: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--sun) 18%, transparent) 0%, color-mix(in srgb, var(--caboose) 12%, transparent) 35%, color-mix(in srgb, var(--cherry) 6%, transparent) 60%, transparent 95%);
    --shadow-soft: 0 6px 24px rgba(10, 3, 4, 0.5), 0 0 16px color-mix(in srgb, var(--caboose) 8%, transparent);
    --shadow: 0 10px 28px rgba(10, 3, 4, 0.5), 0 0 20px color-mix(in srgb, var(--caboose) 10%, transparent);
    --shadow-card: 0 12px 30px rgba(10, 3, 4, 0.65), 0 4px 20px color-mix(in srgb, var(--caboose) 20%, transparent), 0 -4px 20px color-mix(in srgb, var(--sun) 12%, transparent);
    --shadow-lift: 0 18px 42px rgba(10, 3, 4, 0.75), 0 8px 30px color-mix(in srgb, var(--caboose) 28%, transparent), 0 -8px 30px color-mix(in srgb, var(--sun) 20%, transparent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cream: #180c0e;
        --paper: #281518;
        --cream-deep: #100607;
        --soot: #0a0304;
        --ink: #fff2e6;
        --ink-soft: #dac2ba;
        --rail: #724e52;
        --caboose: #ff4d66;
        --caboose-deep: #ff2a47;
        --mint: #a2e8dd;
        --sun: #ffdb70;
        --cherry: #ff99bc;
        --dot-color: var(--sun);
        --bg-gradient: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--sun) 18%, transparent) 0%, color-mix(in srgb, var(--caboose) 12%, transparent) 35%, color-mix(in srgb, var(--cherry) 6%, transparent) 60%, transparent 95%);
        --shadow-soft: 0 6px 24px rgba(10, 3, 4, 0.5), 0 0 16px color-mix(in srgb, var(--caboose) 8%, transparent);
        --shadow: 0 10px 28px rgba(10, 3, 4, 0.5), 0 0 20px color-mix(in srgb, var(--caboose) 10%, transparent);
        --shadow-card: 0 12px 30px rgba(10, 3, 4, 0.65), 0 4px 20px color-mix(in srgb, var(--caboose) 20%, transparent), 0 -4px 20px color-mix(in srgb, var(--sun) 12%, transparent);
        --shadow-lift: 0 18px 42px rgba(10, 3, 4, 0.75), 0 8px 30px color-mix(in srgb, var(--caboose) 28%, transparent), 0 -8px 30px color-mix(in srgb, var(--sun) 20%, transparent);
    }
}