/* =========================================================
   Acuaria — Design Tokens
   ========================================================= */

:root {
    /* ---------- Brand colors (from Flutter app_colors.dart) ---------- */
    --color-navy-deep: #0D1B2A;
    --color-navy: #18344A;
    --color-navy-mid: #162D50;
    --color-navy-dark: #080F1A;

    --color-teal: #1BB8A0;
    --color-teal-light: #48D9C4;
    --color-teal-dark: #0F9682;

    --color-coral: #FF6B35;
    --color-coral-light: #FF8A5B;

    --color-violet: #8B5CF6;
    --color-gold: #EAB308;
    --color-red: #EF4444;
    --color-green: #22C55E;

    --color-cream: #F8F5F0;
    --color-cream-off: #F2EDE4;
    --color-white: #FFFFFF;

    --color-text-dark: #18344A;
    --color-text-muted: #6B7280;
    --color-text-on-dark: rgba(242, 237, 228, 0.88);
    --color-text-on-dark-muted: rgba(242, 237, 228, 0.6);

    --color-border-light: rgba(24, 52, 74, 0.1);
    --color-border-dark: rgba(242, 237, 228, 0.12);
    --color-border-teal: rgba(27, 184, 160, 0.35);

    /* ---------- Gradients ---------- */
    --gradient-hero: linear-gradient(170deg, #0D1B2A 0%, #162D50 50%, #0D1B2A 100%);
    --gradient-ai: radial-gradient(ellipse at top, #0F9682 0%, #0D1B2A 55%, #080F1A 100%);
    --gradient-teal: linear-gradient(135deg, #1BB8A0 0%, #48D9C4 100%);
    --gradient-teal-coral: linear-gradient(135deg, #1BB8A0 0%, #48D9C4 50%, #FF6B35 100%);
    --gradient-card-premium: linear-gradient(135deg, #18344A 0%, #0F9682 50%, #1BB8A0 100%);
    --gradient-text-ai: linear-gradient(135deg, #48D9C4 0%, #1BB8A0 50%, #FF6B35 100%);

    /* ---------- Shadows ---------- */
    --shadow-sm: 0 1px 3px rgba(13, 27, 42, 0.08);
    --shadow-md: 0 6px 20px rgba(13, 27, 42, 0.1);
    --shadow-lg: 0 18px 50px rgba(13, 27, 42, 0.15);
    --shadow-xl: 0 30px 80px rgba(13, 27, 42, 0.25);
    --shadow-glow-teal: 0 0 40px rgba(27, 184, 160, 0.35);
    --shadow-glow-teal-strong: 0 0 60px rgba(27, 184, 160, 0.55);
    --shadow-glow-coral: 0 0 40px rgba(255, 107, 53, 0.35);
    --shadow-card: 0 10px 30px rgba(13, 27, 42, 0.08);

    /* ---------- Typography ---------- */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    --font-size-hero: clamp(2.5rem, 6vw, 5rem);
    --font-size-h1: clamp(2rem, 5vw, 3.75rem);
    --font-size-h2: clamp(1.75rem, 4vw, 3rem);
    --font-size-h3: clamp(1.375rem, 2.5vw, 1.875rem);
    --font-size-h4: clamp(1.125rem, 2vw, 1.375rem);
    --font-size-body-lg: clamp(1.0625rem, 1.5vw, 1.25rem);
    --font-size-body: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.1;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: -0.01em;
    --letter-spacing-wide: 0.05em;

    /* ---------- 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;
    --space-24: 6rem;
    --space-32: 8rem;

    --section-padding-y: clamp(4rem, 9vw, 8rem);
    --container-padding-x: clamp(1.25rem, 4vw, 2.5rem);
    --container-max: 1240px;
    --container-narrow: 980px;

    /* ---------- Borders / radii ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 40px;
    --radius-pill: 999px;

    /* ---------- Transitions ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 300ms var(--ease-out);
    --transition-slow: 600ms var(--ease-out);

    /* ---------- Z-index scale ---------- */
    --z-base: 1;
    --z-overlay: 10;
    --z-header: 100;
    --z-modal: 1000;

    /* ---------- Header height (for scroll offset) ---------- */
    --header-height: 72px;
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }
}