/* Token di progetto: colore, tipografia, spazio. Usati dal sito pubblico e dal pannello admin. */

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colore: famiglia petrolio di marca + un solo colore d'azione (la cravatta del ritratto) */
    --petrol-950: #071e2b;
    --petrol-900: #0a2b3e;   /* primario di marca */
    --petrol-700: #14465f;
    --petrol-600: #1e5a7a;   /* accento di marca */
    --petrol-200: #c9dbe5;
    --petrol-100: #e2ebf0;
    --paper: #f3f6f8;
    --white: #ffffff;
    --ink: #14232c;
    --ink-soft: #43555f;
    --action: #f2994a;
    --action-hover: #ffad66;
    --focus: #1e5a7a;
    --line: rgba(10, 43, 62, 0.14);
    --line-strong: rgba(10, 43, 62, 0.32);
    --line-on-dark: rgba(255, 255, 255, 0.2);
    --danger: #a3271b;
    --success: #1c6b3c;

    /* Tipografia: una sola famiglia, ruoli distinti da dimensione, peso e spazio */
    --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-sm: 0.875rem;
    --fs-base: 1.0625rem;
    --fs-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
    --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --fs-h2: clamp(1.875rem, 1.4rem + 1.8vw, 3rem);
    --fs-page: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --fs-h1: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
    --measure: 62ch;

    /* Spazio: base 4px */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --section-y: clamp(4rem, 8vw, 7.5rem);
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --header-h: 4.5rem;
    --radius: 4px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}