/* ══════════════════════════════════════════════
   Syntarq — Design System Variables
   Tutte le variabili centralizzate.
   Nessun valore hardcoded nelle pagine.
   ══════════════════════════════════════════════ */

:root {
    /* ── Colori ── */
    --color-primary:      #0B1432;
    --color-cyan:         #5BC0DE;
    --color-white:        #FFFFFF;
    --color-grey-dark:    #6B7B8D;
    --color-grey-mid:     #D0D5DB;
    --color-grey-light:   #F2F4F6;
    --color-text:         #333333;
    --color-bg-dark:      #0B1432;
    --color-bg-dark-deep: #070D22;

    /* Colori derivati */
    --color-cyan-hover:   #4AACC9;
    --color-primary-light:#1A2550;
    --color-border-light: #E8ECF0;

    /* ── Tipografia ── */
    --font-primary:       'Inter', 'Satoshi', 'General Sans', sans-serif;
    --font-size-base:     18px;
    --font-size-h1:       48px;
    --font-size-h2:       32px;
    --font-size-h3:       24px;
    --font-size-small:    14px;
    --font-size-cta:      16px;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;

    --line-height-base:    1.7;
    --line-height-heading: 1.2;
    --line-height-h3:      1.3;
    --line-height-small:   1.5;

    /* ── Spaziature ── */
    --space-xs:      8px;
    --space-sm:      16px;
    --space-md:      32px;
    --space-lg:      64px;
    --space-xl:      96px;
    --space-section: 120px;

    /* ── Layout ── */
    --container-max:    1200px;
    --container-narrow: 800px;
    --grid-columns:     12;
    --grid-gap:         32px;

    /* ── Transizioni ── */
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ── Border radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-round: 50%;

    /* ── Ombre ── */
    --shadow-light:  0 2px 8px rgba(11, 20, 50, 0.06);
    --shadow-medium: 0 4px 16px rgba(11, 20, 50, 0.10);
    --shadow-header: 0 2px 12px rgba(11, 20, 50, 0.08);

    /* ── Header ── */
    --header-height: 80px;
}

/* ── Responsive overrides ── */

/* Tablet: 768px – 1200px */
@media (max-width: 1200px) {
    :root {
        --font-size-h1:       40px;
        --font-size-h2:       28px;
        --font-size-h3:       22px;
        --space-section:      80px;
        --grid-gap:           24px;
    }
}

/* Mobile: < 768px */
@media (max-width: 768px) {
    :root {
        --font-size-h1:       32px;
        --font-size-h2:       24px;
        --font-size-h3:       20px;
        --font-size-base:     16px;
        --space-section:      64px;
        --space-lg:           48px;
        --grid-gap:           16px;
        --header-height:      64px;
    }
}