/* ============================================================
   Mochello — Design Tokens
   ============================================================
   Warm, nature-inspired brand palette.
   Primary: violet (#7c3aed), Accent: coral (#f97316)
   ============================================================ */

:root {
    /* ── Colors ── */
    --bg-base: #fdf8f3;
    --bg-surface: #ffffff;
    --bg-elevated: #fff7ed;
    --bg-muted: #f5f0eb;

    --text-primary: #1e1b2e;
    --text-secondary: #6b6580;
    --text-muted: #9e97b0;
    --text-inverse: #ffffff;

    --accent: #7c3aed;
    --accent-hover: #6d28d9;
    --accent-light: #ede9fe;
    --accent-2: #f97316;
    --accent-2-hover: #ea580c;
    --accent-2-light: #fff7ed;

    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, #7c3aed, #a855f7);
    --gradient-warm: linear-gradient(135deg, #f97316, #f59e0b);
    --gradient-hero: linear-gradient(160deg, #fdf8f3 0%, #ede9fe 50%, #fff7ed 100%);

    /* ── Typography ── */
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;

    /* ── Spacing ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ── Radius ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
    --shadow-xl: 0 16px 50px rgba(0,0,0,0.12);

    /* ── Layout ── */
    --container-max: 1600px;
    --header-height: 72px;

    /* ── Transitions ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
    --bg-base: #0f0a1a;
    --bg-surface: #1a1525;
    --bg-elevated: #241e35;
    --bg-muted: #1f1a2e;

    --text-primary: #f0ecf8;
    --text-secondary: #a89fc0;
    --text-muted: #6b6580;

    --accent-light: #2e1065;
    --accent-2-light: #431407;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.35);

    --gradient-hero: linear-gradient(160deg, #0f0a1a 0%, #1a1035 50%, #1a1520 100%);
}