/**
 * variables.css — Frigotel Design System Tokens
 *
 * Single source of truth for all design decisions.
 * All other CSS files must reference these variables — never hardcode values.
 *
 * @package Frigotel
 */

/* =========================================================
   TYPOGRAPHY — LOCAL ASSETS
   Local fonts optimized for performance and GDPR compliance.
========================================================= */
/* Note: Currently all weights point to the same latin-subset file. 
   Consider loading specific weight files if not using a variable font. */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
}

:root {

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

    /* Primary Palette */
    --color-blu-profondo:    #0D2E6B;  /* Branding & high-contrast primary text */
    --color-blu-primario:    #0057A8;  /* Action color (links, buttons, borders) */
    --color-ciano-accento:   #00A8E8;  /* Hover states and visual highlights */
    --color-ciano-chiaro:    #7DD6F5;  /* Decorative elements and particles */

    /* Backgrounds & neutrals */
    --color-azzurro-tenue:   #D6EFFC;  /* alternate section bg, subtle borders */
    --color-sfondo-freddo:   #F4F8FC;  /* alternate section backgrounds */
    --color-bianco:          #FFFFFF;  /* primary background */

    /* Accents */
    --color-stella:          #F5B301;  /* "favorite" star (saved machines) */

    /* Text shades */
    --color-nero-tecnico:    #0F1923;  /* text on dark bg (use sparingly) */
    --color-grigio-blu:      #3D5166;  /* secondary text */
    --color-grigio-medio:    #6B7A8D;  /* tertiary text, placeholders */

    /* Gradients (reserved for: hero, navbar, large decorative shapes only) */
    --gradient-hero: linear-gradient(135deg, #0D2E6B 0%, #0057A8 55%, #00A8E8 100%);
    --gradient-hero-overlay: linear-gradient(180deg, rgba(13, 46, 107, 0.85) 0%, rgba(0, 87, 168, 0.7) 100%);

    /* =========================================================
       TYPOGRAPHY — Figtree (Google Fonts)
    ========================================================= */

    --font-family-base: 'Figtree', system-ui, -apple-system, sans-serif;

    /* Font weights */
    --font-weight-regular:  400;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Font sizes — Desktop */
    --text-heading-xl:  3.5rem;    /* 56px */
    --text-heading-l:   3rem;      /* 48px */
    --text-heading-m:   2.5rem;    /* 40px */
    --text-heading-s:   1.5rem;    /* 24px */
    --text-heading-xs:  1.25rem;   /* 20px */
    --text-body-large:  1.125rem;  /* 18px */
    --text-body-medium: 1rem;      /* 16px */
    --text-body-small:  0.875rem;  /* 14px */

    /* Line heights */
    --line-height-heading: 1.15;
    --line-height-body:    1.65;

    /* Letter spacing */
    --letter-spacing-tight:  -0.02em;
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.05em;
    --letter-spacing-wider:   0.12em;

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

    /* Spacing Scale */
    --space-xs:   0.5rem;    /*  8px */
    --space-s:    1rem;      /* 16px */
    --space-m:    1.5rem;    /* 24px */
    --space-l:    2rem;      /* 32px */
    --space-xl:   3rem;      /* 48px */
    --space-2xl:  5rem;      /* 80px */
    --space-3xl:  7.5rem;    /* 120px */

    /* Semantic Section Padding (Derived from scale) */
    --section-padding-desktop: var(--space-2xl);
    --section-padding-tablet:  3.75rem; /* 60px */
    --section-padding-mobile:  var(--space-m);

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

    --header-height:       70px;
    --container-max-width: 1440px;
    --container-padding:   1.5rem;

    /* =========================================================
       BORDERS & RADIUS
    ========================================================= */

    --border-subtle:  1px solid var(--color-azzurro-tenue);
    --border-primary: 1px solid var(--color-blu-primario);

    --radius-s:    0.375rem;  /*  6px */
    --radius-m:    0.75rem;   /* 12px */
    --radius-l:    1.25rem;   /* 20px */
    --radius-xl:   2rem;      /* 32px */
    --radius-full: 9999px;

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

    --shadow-card:   0 2px 12px rgba(13, 46, 107, 0.08);
    --shadow-hover:  0 8px 32px rgba(0, 87, 168, 0.14);
    --shadow-navbar: 0 2px 20px rgba(13, 46, 107, 0.12);

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

    --transition-fast:    0.15s ease;
    --transition-base:    0.2s ease;
    --transition-medium:  0.3s ease;
    --transition-slow:    0.6s ease;

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

    --z-base:    1;
    --z-raised:  10;
    --z-navbar:  100;
    --z-overlay: 200;
    --z-modal:   300;

    /* 
       BREAKPOINT REFERENCE TABLE
       Usage: @media (min-width: [breakpoint])
       
       | Device  | Threshold | Logic             |
       |---------|-----------|-------------------|
       | Mobile  | < 768px   | Small devices     |
       | Tablet  | 768px     | Portrait tablets  |
       | Desktop | 1200px    | Default desktop   |
    */
}