/* CSS Design Tokens & Theming */
:root {
    /* Color Palette - User Selected Rose / Cerise / Ruby Gradient Suite */
    --hue-primary: 342;
    --hue-accent: 335;
    --hue-secondary: 215;

    /* --- Swatch Gradient Presets (From User Provided Palette) --- */
    --gradient-swatch-1: linear-gradient(180deg, #faa5b6 0%, #e62662 100%);
    --gradient-swatch-1-flow: linear-gradient(135deg, #faa5b6 0%, #ff527b 50%, #e62662 100%);

    --gradient-swatch-2: linear-gradient(180deg, #f8b8cf 0%, #d82b6b 100%);
    --gradient-swatch-2-flow: linear-gradient(135deg, #f8b8cf 0%, #f04383 50%, #d82b6b 100%);

    --gradient-swatch-3: linear-gradient(180deg, #f09ab5 0%, #b9225c 100%);
    --gradient-swatch-3-flow: linear-gradient(135deg, #f09ab5 0%, #d43170 50%, #b9225c 100%);

    --gradient-swatch-4: linear-gradient(180deg, #f8798d 0%, #eb2149 100%);
    --gradient-swatch-4-flow: linear-gradient(135deg, #f8798d 0%, #f43f5e 50%, #eb2149 100%);

    --gradient-swatch-5: linear-gradient(180deg, #f99bb1 0%, #e2185b 100%);
    --gradient-swatch-5-flow: linear-gradient(135deg, #f99bb1 0%, #ee2c6e 50%, #e2185b 100%);

    --gradient-swatch-6: linear-gradient(180deg, #e89bb5 0%, #a8235e 100%);
    --gradient-swatch-6-flow: linear-gradient(135deg, #e89bb5 0%, #c4296c 50%, #a8235e 100%);

    --gradient-swatch-7: linear-gradient(180deg, #ea8ea5 0%, #781c47 100%);
    --gradient-swatch-7-flow: linear-gradient(135deg, #ea8ea5 0%, #a82358 50%, #781c47 100%);

    --gradient-swatch-8: linear-gradient(180deg, #f9b6cd 0%, #f02c77 100%);
    --gradient-swatch-8-flow: linear-gradient(135deg, #f9b6cd 0%, #fb5291 50%, #f02c77 100%);

    --gradient-swatch-9: linear-gradient(180deg, #f07c9b 0%, #ce2564 100%);
    --gradient-swatch-9-flow: linear-gradient(135deg, #f07c9b 0%, #de3172 50%, #ce2564 100%);

    --gradient-swatch-10: linear-gradient(180deg, #f19eb8 0%, #b52562 100%);
    --gradient-swatch-10-flow: linear-gradient(135deg, #f19eb8 0%, #c92f6d 50%, #b52562 100%);

    /* Active Brand Gradient & Colors (Set to Premier Swatch #5) */
    --brand-primary: #e2185b;
    --brand-primary-hover: #c2185b;
    --brand-gradient: var(--gradient-swatch-5-flow);
    --brand-gradient-vertical: var(--gradient-swatch-5);
    --brand-glow: rgba(226, 24, 91, 0.28);

    /* Light Theme (Default) */
    --bg-base: #f8fafc;
    --bg-gradient: radial-gradient(at 0% 0%, rgba(249, 155, 177, 0.16) 0px, transparent 50%),
                   radial-gradient(at 100% 0%, rgba(226, 24, 91, 0.08) 0px, transparent 50%),
                   radial-gradient(at 50% 100%, rgba(240, 67, 131, 0.05) 0px, transparent 50%);
    --surface: rgba(255, 255, 255, 0.85);
    --surface-elevated: rgba(255, 255, 255, 0.95);
    --surface-glass: rgba(255, 255, 255, 0.7);
    --surface-border: rgba(226, 232, 240, 0.8);
    --surface-border-glass: rgba(255, 255, 255, 0.5);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;

    /* Shadows & Elevation */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-glass: 0 8px 32px 0 rgba(226, 24, 91, 0.08);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Transitions & Motion Budget */
    --transition-micro: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-ui: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-profile: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Typography */
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="dark"] {
    --bg-base: #090d16;
    --bg-gradient: radial-gradient(at 0% 0%, rgba(226, 24, 91, 0.18) 0px, transparent 60%),
                   radial-gradient(at 100% 0%, rgba(181, 37, 98, 0.14) 0px, transparent 60%),
                   radial-gradient(at 50% 100%, rgba(240, 67, 131, 0.1) 0px, transparent 60%);
    --surface: rgba(18, 24, 38, 0.82);
    --surface-elevated: rgba(28, 36, 56, 0.92);
    --surface-glass: rgba(18, 24, 38, 0.65);
    --surface-border: rgba(255, 255, 255, 0.08);
    --surface-border-glass: rgba(255, 255, 255, 0.12);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-inverse: #090d16;

    --brand-primary: #ff6594;
    --brand-primary-hover: #ff4b7d;
    --brand-glow: rgba(244, 63, 94, 0.45);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}