/* _tokens.css — design tokens & global reset */
/* =============================================================================
   Design tokens (single source of truth)
   Loaded by index.html directly AND by every other page via @import in styles.css
   Override per-file values further down in styles.css / turni.css / etc.
   ============================================================================= */
:root {
    /* ---- Brand palette ---- */
    --c-brand:        #23b59f;
    --c-brand-bright: #1cd8bc;
    --c-brand-deep:   #138482;
    --c-brand-grad:   #0D998F;
    --c-accent-red:   #f8333c;

    /* ---- Neutrals ---- */
    --c-white:        #fff;
    --c-black:        #0f0f0f;
    --c-ink-strong:   #1a2e2a;
    --c-ink:          #2a3433;
    --c-ink-muted:    #647b74;
    --c-gray:         #323d3b;
    --c-gray-light:   #bfbfbf;

    /* ---- Surfaces ---- */
    --c-page:         #f8f8f8;
    --c-surface:      #ffffff;
    --c-surface-2:    #f6f7f7;
    --c-surface-frost: rgba(255, 255, 255, 0.92);

    /* ---- Borders ---- */
    --c-border-soft:  rgba(16, 91, 81, 0.14);
    --c-border-line:  rgba(36, 48, 47, 0.1);

    /* ---- Spacing scale ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* ---- Radius scale ---- */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   14px;
    --r-xl:   16px;
    --r-2xl:  20px;
    --r-3xl:  24px;
    --r-pill: 999px;

    /* ---- Shadow scale ---- */
    --shadow-sm: 0 1px 3px rgba(8, 32, 28, .08), 0 0 0 1px rgba(8, 32, 28, .07);
    --shadow-md: 0 10px 22px rgba(8, 42, 36, .12);
    --shadow-lg: 0 16px 34px rgba(9, 45, 39, .16);
    --shadow-tile-rest:  0 4px 8px -6px rgba(8, 32, 28, .42), 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-tile-hover: 0 14px 24px rgba(8, 32, 28, .26), 0 4px 10px rgba(0, 0, 0, .16);

    /* ---- Typography ---- */
    --ff-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fw-regular: 400;
    --fw-bold:    700;
    --fw-black:   800;

    /* ---- Legacy aliases (kept working, prefer the new tokens above for new code) ---- */
    --primario:        var(--c-brand);
    --chiaro:          var(--c-brand-bright);
    --bianco:          var(--c-white);
    --nero:            var(--c-black);
    --scuro:           var(--c-brand-deep);
    --scuroGradiente:  var(--c-brand-grad);
    --grigio:          var(--c-gray);
    --grigioChiaro:    var(--c-gray-light);
    --accentoRosso:    var(--c-accent-red);
    --page-bg:         var(--c-page);
    --shadow-soft: 0 5px 12px rgba(0, 0, 0, .2), inset 0 1.5px 0 rgba(255, 255, 255, .1), inset 0 1.5px 0 rgba(255, 255, 255, .1);
    --servizi-shift:   8px;
    --contatti-shift:  14px;

    /* ---- Semantic shortcuts (alias common tokens for readability) ---- */
    --surface: var(--c-surface);
    --text:    var(--c-ink);
    --muted:   var(--c-ink-muted);
    --line:    var(--c-border-line);
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-brand:        #53baaa;
        --c-brand-bright: #128776;
        --c-brand-grad:   #0a756e;
        --c-gray:         #cbbfbf;
        --c-gray-light:   #737373;
        --c-page:         #0F1418;
        --surface: #1e2b29;
        --text:    #edf5f3;
        --muted:   #8faaa5;
        --line:    rgba(200, 220, 215, 0.15);
    }
}

/* --------- Reset --------- */
* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--page-bg);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--nero);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background: var(--page-bg);
    }

    body {
        color: #e9efed
    }
}

p {
    font-size: 16px;
    line-height: 1.5
}

a {
    color: inherit;
    text-decoration: none
}

.skip-link {
    position: fixed !important;
    left: 14px !important;
    top: 10px !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    z-index: 500 !important;
    pointer-events: none !important;
    transform: translateY(-150%) !important;
    opacity: 0 !important;
    background: #ffffff !important;
    color: #0f4f45 !important;
    border: 2px solid #0f4f45 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-weight: 700 !important;
}

.skip-link:focus,
.skip-link:focus-visible {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
}

:where(a, button, [role="button"], input, select, textarea):focus-visible {
    outline: 3px solid #0e4f45;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .88);
    border-radius: 10px;
}

/* Fallback focus per browser senza :focus-visible/:where */
a:focus,
button:focus,
[role="button"]:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid #0e4f45;
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    :where(a, button, [role="button"], input, select, textarea):focus-visible {
        outline-color: #79d0c1;
        box-shadow: 0 0 0 2px rgba(20, 30, 33, .9);
    }
}