/* Design System — FluxHub B2B Tech (navy + cyan)
   Inspired by Linear / Vercel / Stripe restraint
   ============================================================ */

:root {
    /* === BRAND ("Blu in movimento" — cobalto distintivo) ==== */
    --primary-color: #2447f0;          /* Cobalto: testi, simboli, CTA */
    --primary-hover: #1733c4;
    --accent-cyan: #16c8e6;            /* Cyan acceso: accenti, highlight, "Hub" */
    --accent-cyan-hover: #12b0cb;
    --coral-accent: #16c8e6;           /* Legacy alias → ora cyan */
    --focus-blue: #3B82F6;

    /* === TEXT =============================================== */
    --text-dark: #0F172A;              /* Slate-900 */
    --text-heading: #0F4C81;           /* Navy */
    --text-secondary: #64748B;         /* Slate-500 */
    --text-light: #64748B;
    --text-muted: #94A3B8;             /* Slate-400 */
    --text-dark-warm: #1E293B;         /* Slate-800 (legacy) */
    --text-on-dark: #94A3B8;
    --text-on-dark-bright: #F8FAFC;

    /* === SURFACES =========================================== */
    --white: #FFFFFF;
    --parchment: #FFFFFF;              /* legacy alias → white */
    --ivory: #F8FAFC;                  /* off-white per sezioni alternate */
    --warm-sand: #F1F5F9;              /* legacy alias → slate-100 */
    --bg-light: #F8FAFC;
    --dark-bg: #0F172A;                /* Slate-900: hero/CTA dark */
    --dark-surface: #1E293B;           /* Slate-800: card in dark */
    --charcoal-warm: #1E293B;          /* legacy alias */

    /* === BORDERS / RINGS ==================================== */
    --border-cream: #E2E8F0;           /* Slate-200 */
    --border-warm: #E2E8F0;
    --border-color: #E2E8F0;
    --border-dark: #1E293B;
    --ring-warm: #CBD5E1;              /* Slate-300 */
    --ring-deep: #94A3B8;              /* Slate-400 */

    /* === SEMANTIC (UI app) ================================== */
    --success: #10B981;
    --warning: #F59E0B;
    --error:   #EF4444;
    --info:    #3B82F6;

    /* === SHADOWS (minimal, soft — Linear/Vercel) ============ */
    --shadow:           0 0 0 1px rgba(15, 23, 42, 0.06);
    --shadow-ring:      0 0 0 1px rgba(15, 23, 42, 0.10);
    --shadow-whisper:   0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-soft:      0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-elevated:  0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.08);
    --shadow-hover:     0 4px 12px rgba(15, 23, 42, 0.08);

    /* === RADII ============================================== */
    --radius-sm:   6px;
    --radius-base: 8px;                /* default */
    --radius-md:   12px;               /* cards */
    --radius-lg:   16px;               /* modali */
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --border-radius: 8px;
    --border-radius-card: 12px;

    /* === TYPOGRAPHY ========================================= */
    --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-serif:   'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;  /* alias legacy → ora Manrope */
    --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* === SPACING (4px base scale) =========================== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;

    /* Legacy aliases — manteniamo i caller che usano --space-xs/sm/md/... */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;                 /* allineato a 4px scale (era 80) */
    --space-4xl: 96px;                 /* allineato a 4px scale (era 120) */

    /* === LAYOUT ============================================= */
    --container-max: 1280px;

    /* === GRADIENTS ========================================== */
    --gradient-hero:  linear-gradient(135deg, #2447f0 0%, #16c8e6 100%);
    --gradient-glow:  radial-gradient(circle, rgba(22, 200, 230, 0.4), transparent 70%);

    /* === MOTION ============================================= */
    --transition:      all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
}