/* ==========================================================================
   Design Tokens — Ananoè Noleggio Barche
   Da Figma Design System
   ========================================================================== */

:root {
    /* Colors */
    --navy-deep: #0A2E3C;
    --ocean-dark: #0D3B4D;
    --coral-accent: #E8632B;
    --coral-light: #F28C5A;
    --sky-blue: #4DB8D1;
    --aqua-light: #E2F5FC;
    --sand-white: #F5F1EC;
    --pure-white: #FFFFFF;
    --charcoal: #2C2C2C;
    --dark-bg: #0F0F0F;
    --dark-input: #262626;
    --dark-border: #404040;
    --text-muted: #737373;
    --text-muted-light: #999999;

    /* Typography */
    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Manrope', sans-serif;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.08);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-coral: 0 2px 8px rgba(232, 99, 43, 0.3);

    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: 12px;

    /* Max width */
    --container-max: 1280px;
    --container-narrow: 960px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}