/* ==========================================================
   Progetto Sentinel v2.0
   File: variables.css
   Versione RC1
   ========================================================== */

:root {

    /* ======================================================
       COLOR PALETTE
       ====================================================== */

    --color-primary: #0A84FF;
    --color-primary-dark: #0669CC;
    --color-primary-light: #4DA8FF;

    --color-secondary: #00C2A8;
    --color-secondary-dark: #00917D;

    --color-accent: #FFC857;
    --color-danger: #E5484D;
    --color-warning: #F4A100;
    --color-success: #22C55E;
    --color-info: #38BDF8;

    /* ======================================================
       BACKGROUND
       ====================================================== */

    --bg-body: #07111D;

    --bg-surface: #0D1726;

    --bg-surface-light: #132033;

    --bg-card: #172437;

    --bg-card-hover: #1C2D44;

    --bg-overlay: rgba(5, 10, 18, .82);

    --bg-glass: rgba(255,255,255,.05);

    /* ======================================================
       TEXT
       ====================================================== */

    --text-primary: #F5F7FA;

    --text-secondary: #C8D3E0;

    --text-muted: #8B98AA;

    --text-disabled: #657487;

    --text-dark: #07111D;

    --text-white: #FFFFFF;

    /* ======================================================
       BORDER
       ====================================================== */

    --border-color: rgba(255,255,255,.08);

    --border-color-light: rgba(255,255,255,.04);

    --border-active: var(--color-primary);

    /* ======================================================
       SHADOWS
       ====================================================== */

    --shadow-xs:
        0 1px 2px rgba(0,0,0,.20);

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.22);

    --shadow-md:
        0 10px 30px rgba(0,0,0,.28);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.35);

    --shadow-xl:
        0 30px 70px rgba(0,0,0,.45);

    /* ======================================================
       RADIUS
       ====================================================== */

    --radius-xs: 4px;

    --radius-sm: 8px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 24px;

    --radius-2xl: 32px;

    --radius-pill: 999px;

    /* ======================================================
       SPACING
       ====================================================== */

    --space-0: 0;

    --space-1: .25rem;

    --space-2: .5rem;

    --space-3: .75rem;

    --space-4: 1rem;

    --space-5: 1.25rem;

    --space-6: 1.5rem;

    --space-7: 1.75rem;

    --space-8: 2rem;

    --space-10: 2.5rem;

    --space-12: 3rem;

    --space-14: 3.5rem;

    --space-16: 4rem;

    --space-20: 5rem;

    --space-24: 6rem;

    --space-28: 7rem;

    --space-32: 8rem;

    /* ======================================================
       CONTAINERS
       ====================================================== */

    --container-xs: 540px;

    --container-sm: 720px;

    --container-md: 960px;

    --container-lg: 1140px;

    --container-xl: 1320px;

    --container-max: 1440px;

    /* ======================================================
       HEADER
       ====================================================== */

    --header-height: 82px;

    --header-blur: 14px;

    --header-border: rgba(255,255,255,.06);

    /* ======================================================
       BUTTONS
       ====================================================== */

    --button-height: 52px;

    --button-padding-x: 1.8rem;

    --button-radius: 12px;

    /* ======================================================
       CARDS
       ====================================================== */

    --card-radius: 18px;

    --card-padding: 2rem;

    --card-border: rgba(255,255,255,.06);

    /* ======================================================
       ICONS
       ====================================================== */

    --icon-sm: 18px;

    --icon-md: 22px;

    --icon-lg: 32px;

    --icon-xl: 42px;
    /* ======================================================
       TYPOGRAPHY
       ====================================================== */

    --font-heading:
        "Manrope",
        sans-serif;

    --font-body:
        "Inter",
        sans-serif;

    --font-mono:
        "JetBrains Mono",
        monospace;

    --font-size-xs: .75rem;

    --font-size-sm: .875rem;

    --font-size-base: 1rem;

    --font-size-md: 1.125rem;

    --font-size-lg: 1.25rem;

    --font-size-xl: 1.5rem;

    --font-size-2xl: 2rem;

    --font-size-3xl: 2.75rem;

    --font-size-4xl: 3.5rem;

    --font-size-5xl: 4.5rem;

    --font-size-page-title: clamp(1.75rem, 3.36vw, 2.975rem);

    --font-size-section-title: clamp(1.35rem, 2.1vw, 1.9rem);

    --font-weight-light: 300;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;

    --line-height-tight: 1.15;

    --line-height-heading: 1.2;

    --line-height-body: 1.7;

    --line-height-relaxed: 1.9;

    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --transition-fast:
        150ms ease;

    --transition:
        250ms ease;

    --transition-slow:
        450ms ease;

    --transition-bounce:
        350ms cubic-bezier(.22,1,.36,1);

    /* ======================================================
       Z-INDEX
       ====================================================== */

    --z-background: -1;

    --z-normal: 1;

    --z-dropdown: 100;

    --z-sticky: 300;

    --z-header: 500;

    --z-overlay: 800;

    --z-loader: 900;

    --z-modal: 1000;

    --z-toast: 1100;

    --z-tooltip: 1200;

    /* ======================================================
       SECTIONS
       ====================================================== */

    --section-padding-y: 7rem;

    --section-padding-y-mobile: 4rem;

    --section-gap: 2rem;

    /* ======================================================
       GRID
       ====================================================== */

    --grid-gap: 1.5rem;

    --grid-gap-lg: 2rem;

    /* ======================================================
       HERO
       ====================================================== */

    --hero-min-height: calc(100vh - var(--header-height));

    --hero-content-width: 680px;

    /* ======================================================
       FEATURE
       ====================================================== */

    --feature-icon-size: 72px;

    --feature-icon-radius: 18px;

    /* ======================================================
       TIMELINE
       ====================================================== */

    --timeline-line-width: 2px;

    --timeline-dot-size: 18px;

    /* ======================================================
       COUNTERS
       ====================================================== */

    --counter-size: 3rem;

    /* ======================================================
       FOOTER
       ====================================================== */

    --footer-padding: 5rem;

    /* ======================================================
       LOADER
       ====================================================== */

    --loader-size: 120px;

    /* ======================================================
       SCROLL TOP
       ====================================================== */

    --scroll-button-size: 54px;

    /* ======================================================
       OPACITY
       ====================================================== */

    --opacity-disabled: .45;

    --opacity-muted: .70;

    --opacity-overlay: .90;

    /* ======================================================
       BLUR
       ====================================================== */

    --blur-sm: 6px;

    --blur-md: 14px;

    --blur-lg: 24px;

    /* ======================================================
       BORDERS
       ====================================================== */

    --border-width: 1px;

    --border-width-strong: 2px;

    /* ======================================================
       IMAGE
       ====================================================== */

    --image-radius: 20px;

    /* ======================================================
       ANIMATION
       ====================================================== */

    --animation-duration-fast: .25s;

    --animation-duration: .45s;

    --animation-duration-slow: .8s;

    --animation-delay-xs: .05s;

    --animation-delay-sm: .10s;

    --animation-delay-md: .20s;

    --animation-delay-lg: .35s;

    --animation-delay-xl: .50s;
    /* ======================================================
       BREAKPOINTS
       (utilizzati come riferimento per media query)
       ====================================================== */

    --breakpoint-xs: 480px;

    --breakpoint-sm: 576px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 992px;

    --breakpoint-xl: 1200px;

    --breakpoint-xxl: 1400px;

    /* ======================================================
       LAYOUT
       ====================================================== */

    --content-max-width: 1320px;

    --content-narrow-width: 960px;

    --sidebar-width: 320px;

    /* ======================================================
       FORMS
       ====================================================== */

    --input-height: 52px;

    --input-radius: 12px;

    --input-padding-x: 1rem;

    --input-bg: var(--bg-card);

    --input-border: var(--border-color);

    --input-focus: var(--color-primary);

    /* ======================================================
       BADGES
       ====================================================== */

    --badge-height: 30px;

    --badge-radius: 999px;

    --badge-padding-x: .9rem;

    /* ======================================================
       TABLES
       ====================================================== */

    --table-row-height: 56px;

    /* ======================================================
       MAP
       ====================================================== */

    --map-radius: 18px;

    /* ======================================================
       CHARTS
       ====================================================== */

    --chart-height: 360px;

    /* ======================================================
       LINKS
       ====================================================== */

    --link-color: var(--color-primary);

    --link-hover: var(--color-primary-light);

    /* ======================================================
       FOCUS
       ====================================================== */

    --focus-ring:
        0 0 0 3px rgba(10,132,255,.25);

    /* ======================================================
       SELECTION
       ====================================================== */

    --selection-bg: rgba(10,132,255,.30);

    --selection-color: #FFFFFF;

}

@media (max-width: 767.98px) {

    :root {

        --font-size-page-title: clamp(1.4rem, 6.3vw, 1.925rem);

        --font-size-section-title: clamp(1.25rem, 5.2vw, 1.65rem);

    }

}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

::selection {

    background: var(--selection-bg);

    color: var(--selection-color);

}

/* ==========================================================
   PREFERENCE UTENTE
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    :root {

        --transition-fast: 0ms;

        --transition: 0ms;

        --transition-slow: 0ms;

        --transition-bounce: 0ms;

        --animation-duration-fast: 0ms;

        --animation-duration: 0ms;

        --animation-duration-slow: 0ms;

    }

}

/* ==========================================================
   END OF FILE
   ========================================================== */