/* ============================================================
   variables.css = BrandKit file-based
   - solo token + @font-face
   - no componenti reali
   - no skin complete
   - no layout
   - Customizer BrandKit opzionale/test

   PALETTE: WEBUNO NIGHT NAVY
   Brand kit separato dalla skin: palette, tipografia e token soltanto.
   La skin associata gestisce layout, componenti e responsive.
============================================================ */

/* ============================================================
   1) FONT LOCALI
============================================================ */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   2-13) BRANDKIT TOKENS
============================================================ */

:root,
html,
body {
    /* 2) BRAND IDENTITY TOKENS — Webuno Professional */
    --brand-primary: #2F6FEB;
    --brand-primary-hover: #245BC9;
    --brand-secondary: #4C8DFF;
    --brand-accent: #FF6848;
    --brand-text: #F3F5F8;
    --brand-text-muted: #B7C0CF;
    --brand-surface: #1C2A43;
    --brand-surface-soft: #162136;
    --brand-section-bg: #162136;
    --brand-border: #2B3A54;
    --brand-footer-bg: #0F1726;
    --brand-footer-text: #F3F5F8;

    /* 3) MODE / PAGE COLORS */
    --background: #0F1726;
    --background_color: var(--background);
    --surface: var(--brand-surface);
    --surface_color: var(--surface);
    --surface_soft: var(--brand-surface-soft);
    --surface_soft_color: var(--surface_soft);
    --section_bg: var(--brand-section-bg);
    --section_bg_color: var(--section_bg);
    --text: var(--brand-text);
    --text_color: var(--text);
    --text_secondary: var(--brand-text-muted);
    --text_secondary_color: var(--text_secondary);
    --border: var(--brand-border);
    --border_color: var(--border);

    /* 4) TYPOGRAPHY TOKENS */
    --font-base: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-headings: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-buttons: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: var(--font-base);
    --blog-font-heading: "BlogHeadingFont";
    --blog-font-body: "BlogBodyFont";
    --font-size-base: 16px;
    --font-size-h1: clamp(3.2rem, 6.5vw, 6.4rem);
    --font-size-h2: clamp(2.25rem, 4vw, 4rem);
    --font-size-h3: clamp(1.45rem, 2.4vw, 2.15rem);

    /* 5) BUTTON COLOR TOKENS
       NOTA: gradient su --button-bg romperebbe `border-color: var(--button_bg_color)`
       usato dalle skin (CSS invalido). Manteniamo solid color qui; eventuali
       gradient vanno applicati nella skin (solo su background, non su border). */
    --button-bg: var(--brand-accent);
    --button-text: #111827;
    --button-bg-hover: #E95539;
    --button_bg_color: var(--button-bg);
    --button_text_color: var(--button-text);
    --button_bg_hover: var(--button-bg-hover);

    /* 6) SPACING / DENSITY TOKENS */
    --spacing-xs: 4px;
    --spacing-sm: 10px;
    --spacing-md: 18px;
    --spacing-lg: 36px;
    --spacing-xl: 72px;
    --container_width: 1180px;
    --container-width: var(--container_width);
    --container_padding_x: 1rem;
    --section_padding_top: 40px;
    --section_padding_bottom: 72px;
    --grid_gap: 28px;
    --section_head_max_width: 820px;
    --section_head_title_gap: 1rem;
    --section_body_gap: 32px;
    --card_pad: clamp(20px, 2.6vw, 36px);
    --stack_gap: 18px;
    --split_gap: 36px;
    --button_py: 14px;
    --button_px: 26px;

    /* 7) RADIUS TOKENS */
    --radius-xs: 6px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-xl: 42px;
    --card_radius: 30px;
    --media_radius: 28px;
    --button_radius: 999px;

    /* 8) SHADOW TOKENS */
    --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.22);
    --shadow-strong: 0 28px 80px rgba(0, 0, 0, 0.38);
    --card_shadow: 0 22px 64px rgba(0, 0, 0, 0.26);
    --media_shadow: 0 22px 64px rgba(0, 0, 0, 0.30);
    --button_shadow: 0 14px 34px rgba(255, 104, 72, 0.28);
    --button_shadow_hover: 0 20px 46px rgba(255, 104, 72, 0.38);
    --button_shadow_active: 0 5px 14px rgba(255, 104, 72, 0.22);

    /* 9) STATES / FEEDBACK TOKENS — Webuno */
    --success: #38CFA0;
    --success_bg: rgba(56, 207, 160, 0.16);
    --success_border: rgba(56, 207, 160, 0.42);
    --success_text: #9AF0D1;
    --success_border_strong: rgba(56, 207, 160, 0.58);
    --error: #FF7186;
    --error_bg: rgba(255, 113, 134, 0.16);
    --error_border: rgba(255, 113, 134, 0.42);
    --error_text: #FFB7C1;
    --error_border_strong: rgba(255, 113, 134, 0.58);
    --warning: #F3BD58;
    --warning_bg: rgba(243, 189, 88, 0.17);
    --warning_border: rgba(243, 189, 88, 0.42);
    --warning_text: #FFDC98;
    --info: #4C8DFF;
    --info_bg: rgba(76, 141, 255, 0.18);
    --info_border: rgba(76, 141, 255, 0.44);
    --info_text: #BBD3FF;
    --info_border_strong: rgba(76, 141, 255, 0.58);

    /* 10) FORMS / ACCESSIBILITY TOKENS */
    --focus_ring: rgba(76, 141, 255, 0.30);
    --focus_border: #4C8DFF;
    --label_color: #F3F5F8;
    --placeholder_color: rgba(183, 192, 207, 0.68);
    --disabled_bg: rgba(255, 255, 255, 0.06);
    --disabled_text: rgba(183, 192, 207, 0.58);
    --disabled_border: rgba(255, 255, 255, 0.14);

    /* 11) OVERLAY TOKENS */
    --overlay_backdrop: rgba(11, 18, 32, 0.62);
    --overlay_dark: rgba(11, 18, 32, 0.64);
    --overlay_light: rgba(28, 42, 67, 0.90);

    /* 12) TECHNICAL BASE TOKENS */
    --primary: var(--brand-primary);
    --primary_color: var(--brand-primary);
    --primary_hover: var(--brand-primary-hover);
    --primary-light: var(--brand-secondary);
    --secondary: var(--brand-secondary);
    --accent: var(--brand-accent);
    --link_color: var(--brand-secondary);
    --link-color: var(--link_color);
    --header-bg: rgba(15, 23, 38, 0.92);
    --header-text: var(--text);
    --footer-bg: var(--brand-footer-bg);
    --footer-text: var(--brand-footer-text);
    --surface-0: rgba(255, 255, 255, 0.025);
    --surface-1: rgba(255, 255, 255, 0.055);
    --surface-2: rgba(255, 255, 255, 0.10);
    --surface-soft: var(--surface_soft);
    --surface-soft-hover: rgba(76, 141, 255, 0.18);
    --transition: 0.25s ease;

    /* 13) ALIAS / COMPATIBILITY TOKENS */
    --section-bg: var(--section_bg);
    --header_bg_color: var(--header-bg);
    --footer_bg_color: var(--footer-bg);
    --footer_text_color: var(--footer-text);
    --link_color_legacy: var(--link_color);
    --font-headings-old: var(--font-headings);
    --surface_0: var(--surface-0);
    --surface_1: var(--surface-1);
    --surface_2: var(--surface-2);
    --surface_soft_hover: var(--surface-soft-hover);
    --border_soft: var(--border);
    --border-soft: var(--border_soft);
    --text-muted: var(--text_secondary);
    --text_muted: var(--text_secondary);
}

/* ============================================================
   Base minima consentita
   - applica solo font e colori pagina
   - nessun componente, nessun layout
============================================================ */

:root {
    /* Controlli nativi coerenti con il brand kit Night Navy. */
    color-scheme: dark;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--text);
    background: var(--background);
}

/* ============================================================
   14) LEGACY / DEPRECATED PRESETS
   Non usare per nuove skin. I vecchi preset globali
   am-preset--soft / minimal / bold / glass sono stati rimossi dal
   CSS attivo in FASE 2 perche erano skin-like.
   Se servono ancora, vanno migrati in skins/{skin}.css
   o in un layer legacy dedicato.
============================================================ */