/* =============================================================================
   DESIGN TOKENS — Condemi & Partners
   Riferimento: Figma "Condemi Visual Identity" (node 1:545 — versione 2)
   Font: Helvetica Neue (system font su Mac/iOS, fallback Arial su Win/Android)
   ============================================================================= */

:root {
    /* ---------- COLOR PALETTE ---------- */
    --cp-bg:            #ECECEC;
    --cp-black:         #2B2427;   /* nero quasi puro, leggermente caldo (da Figma v2) */
    --cp-white:         #FFFFFF;
    --cp-accent:        #FF713D;   /* default arancione — sovrascrivibile da pannello "Stile" */
    --cp-accent-2:      var(--cp-black);   /* 2° colore palette — sovrascrivibile da pannello; default = nero. Selezionabile negli stati dei bottoni. */
    --cp-slate:         #2E3A46;
    --cp-muted:         rgba(43, 36, 39, 0.45);
    --cp-muted-on-dark: rgba(255, 255, 255, 0.70);

    /* aliases semantici */
    --cp-text:           var(--cp-black);
    --cp-text-on-dark:   var(--cp-white);
    --cp-text-on-accent: var(--cp-white);
    --cp-cta-bg:         var(--cp-accent);
    --cp-cta-text:       var(--cp-white);
    --cp-cta-bg-dark:    var(--cp-black);
    --cp-cta-text-dark:  var(--cp-white);

    /* ---------- TYPOGRAPHY — Google Font (default Inter), scelto dal pannello ---------- */
    --cp-font: 'Inter', system-ui, -apple-system, sans-serif;
    --cp-font-2: var(--cp-font);   /* font secondario (default = primario finché non scelto dal pannello) */
    --cp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;  /* monospazio */

    /* type scale (px desktop) — peso fa la differenza, non la famiglia */
    --cp-fs-display:    45px;   /* hero h1 (da Figma v2) */
    --cp-fs-claim:      36px;   /* claim/section h2 */
    --cp-fs-method:     32px;
    --cp-fs-h3:         24px;
    --cp-fs-body-lg:    25px;   /* paragrafo grande (da Figma v2) */
    --cp-fs-body:       18px;   /* body card / paragrafo standard */
    --cp-fs-ui:         16px;
    --cp-fs-small:      14px;

    /* font weights (Inter variable) */
    --cp-fw-body:    400;
    --cp-fw-medium:  500;
    --cp-fw-bold:    700;
    --cp-fw-xbold:   800;
    --cp-fw-black:   900;

    /* letter spacing (negativo, scale di Helvetica Now Display ≈ Inter -2%) */
    --cp-tracking-display: -0.9px;
    --cp-tracking-claim:   -0.72px;
    --cp-tracking-method:  -0.64px;
    --cp-tracking-h3:      -0.48px;
    --cp-tracking-body:    -0.4px;
    --cp-tracking-ui:      -0.32px;
    --cp-tracking-small:   -0.28px;

    /* line heights */
    --cp-lh-tight:  1.2;
    --cp-lh-normal: 1.5;
    --cp-lh-button: 1.0;

    /* ---------- LAYOUT ---------- */
    --cp-container:    1440px;   /* design canvas reference (Figma 1440) */
    --cp-content:      1140px;   /* colonna centrale dei contenuti */
    --cp-gutter:       24px;     /* padding laterale interno al content */
    --cp-gutter-mobile: 20px;

    /* spacing scale */
    --cp-sp-1:  4px;
    --cp-sp-2:  8px;
    --cp-sp-3:  12px;
    --cp-sp-4:  16px;
    --cp-sp-5:  24px;
    --cp-sp-6:  32px;
    --cp-sp-8:  48px;
    --cp-sp-10: 64px;
    --cp-sp-12: 96px;
    --cp-sp-16: 128px;

    /* ---------- RADIUS / BORDER / SHADOW (da Figma v2: bottoni rounded 5px) ---------- */
    --cp-radius-none: 0;
    --cp-radius-sm:   3px;
    --cp-radius-md:   5px;
    --cp-radius-lg:   10px;
    --cp-border:      1px solid var(--cp-black);

    /* ---------- TRANSITIONS ---------- */
    --cp-t-fast:   120ms ease-out;
    --cp-t-normal: 220ms ease-out;

    /* ---------- Z-INDEX ---------- */
    --cp-z-header: 100;
    --cp-z-menu:   200;
    --cp-z-modal:  900;
}

@media (max-width: 900px) {
    :root {
        --cp-fs-display: 30px;
        --cp-fs-claim:   26px;
        --cp-fs-method:  24px;
        --cp-fs-h3:      20px;
        --cp-fs-body-lg: 19px;
        --cp-fs-body:    16px;
        --cp-fs-ui:      15px;
        --cp-fs-small:   13px;
    }
}