/* Design system OXQ — Fondamenta (Figma: OX_Q, node 23-151 — variabili neutral/*, brand/*,
   radius/*, space/*, size/*). SOLO token: valori, niente selettori di componenti. Le classi
   che li usano stanno in static/css/app.css (prodotto). Per personalizzare un'istanza: copia
   questa dir in design_system_<nome>/ e cambia i valori (basta ridefinire quelli che servono). */
:root {
    /* Superfici (neutral/surface/*) */
    --ds-canvas: #f8f8f8;           /* canvas */
    --ds-surface: #ffffff;          /* raised */
    --ds-field: #f1f1f1;            /* sunken */
    --ds-field-hover: #ececec;
    --ds-control: #e3e3e3;          /* muted */
    --ds-solid: #101010;            /* solid: sfondo di bottoni scuri e avatar */
    --ds-subtle: #f8f8f8;
    --ds-rail: #ffffff;

    /* Testo (neutral/text/*) */
    --ds-ink: #1b1b1b;
    --ds-ink-hover: #000000;
    --ds-text-secondary: #5e5e5e;
    --ds-text-muted: #919191;       /* ≈3,0:1 — caption e meta; per testo lungo usare secondary */
    --ds-text-faint: #d5d5d5;       /* MAI per testo informativo */
    --ds-placeholder: #919191;
    --ds-on-ink: #ffffff;

    /* Linee (neutral/line/*) */
    --ds-hairline: #ececec;
    --ds-border: #d5d5d5;           /* divisori e bordi dei blocchi grafico */
    --ds-border-dashed: #d5d5d5;
    --ds-border-field: #8a8a8f;     /* ≈3,3:1, WCAG 1.4.11 */
    --ds-border-popover: #0000000d;

    /* Accent (brand/surface/solid). Mai da sfondo a un bottone: il primario è nero. */
    --ds-accent: #ff224c;
    --ds-accent-soft: #fff1f3;
    --ds-accent-text: #b8102f;      /* l'accent come TESTO è sempre questo (AA) */
    --ds-danger: #ff224c;
    --ds-danger-soft: #fff1f3;
    --ds-danger-text: #8e0425;      /* danger/text/ink: Esci nel menu account, unica cosa rossa della UI */

    /* Semantici */
    --ds-success: #15803d;
    --ds-success-bg: #dcfce7;
    --ds-success-tint: #f0fdf4;
    --ds-success-border: #86efac;
    --ds-success-dot: #22c55e;
    --ds-info: #1d4ed8;
    --ds-info-bg: #dbeafe;
    --ds-info-tint: #eff6ff;
    --ds-info-border: #93c5fd;
    --ds-info-bar: #3b82f6;
    --ds-link: #1d4ed8;
    --ds-link-hover: #1e40af;
    --ds-warning: #b45309;
    --ds-warning-bg: #fef3c7;
    --ds-warning-tint: #fffbeb;
    --ds-warning-border: #fcd34d;
    --ds-warning-dot: #f59e0b;
    --ds-focus: #1d4ed8;
    --ds-focus-ring: #dbeafe;

    /* Veli */
    --ds-scrim: #1d1d1f2e;
    --ds-scrim-strong: #0000004d;

    /* Tipografia (Inter self-hosted in assets/fonts/) */
    --ds-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ds-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ds-fs-hero: 24px;       --ds-ls-hero: -0.6px;      /* 600 */
    --ds-fs-title: 22px;      --ds-ls-title: -0.44px;    /* 600 */
    --ds-fs-modal: 17px;      --ds-ls-modal: -0.34px;    /* 600 */
    --ds-fs-section: 15px;                               /* 600 */
    --ds-fs-heading: 20px;    --ds-lh-heading: 1.4;      /* 600, heading/sm: stato vuoto */
    --ds-ls-heading: -0.33px;
    --ds-fs-body: 14px;       --ds-lh-body: 1.7;         /* 400 */
    --ds-fs-chat: 16px;       --ds-lh-chat: 1.5;         /* body/md: messaggi in chat */
    --ds-ls-chat: -0.18px;
    --ds-lh-body-compact: 1.55;
    --ds-fs-body-sm: 13.5px;
    --ds-fs-button: 13px;                                /* 500 */
    --ds-fs-label: 12px;                                 /* 500 */
    --ds-fs-meta: 12px;
    --ds-fs-caption: 11px;    --ds-ls-caption: 0.44px;   /* 500, uppercase, muted */
    --ds-fs-kicker: 10.5px;   --ds-ls-kicker: 0.525px;   /* 500, uppercase, muted */
    --ds-fs-mono: 11px;

    /* Raggi */
    --ds-r-pill: 9999px;
    --ds-r-login: 24px;
    --ds-r-sheet: 22px;
    --ds-r-card: 16px;
    --ds-r-modal: 20px;
    --ds-r-card-sm: 14px;
    --ds-r-popover: 16px;
    --ds-r-suggestion: 14px;
    --ds-r-input: 14px;
    --ds-r-menu-item: 10px;
    --ds-r-thumb: 8px;
    --ds-r-page: 6px;

    /* Ombre */
    --ds-shadow-pill: 0 2px 7px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.06);
    --ds-shadow-pill-hover: 0 2px 8px rgba(0,0,0,.12);
    --ds-shadow-card: 0 2px 16px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.06);
    --ds-shadow-float: 0 4px 12px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    --ds-shadow-login: 0 8px 40px rgba(0,0,0,.08);
    --ds-shadow-popover: 0 16px 50px rgba(0,0,0,.22);
    --ds-shadow-modal: 0 20px 60px rgba(0,0,0,.2);
    --ds-shadow-sheet: 0 -10px 40px rgba(0,0,0,.15);

    /* Spaziatura (scala 4px) */
    --ds-sp-1: 4px;  --ds-sp-2: 8px;  --ds-sp-3: 12px; --ds-sp-4: 16px; --ds-sp-5: 20px;
    --ds-sp-6: 24px; --ds-sp-7: 28px; --ds-sp-8: 32px; --ds-sp-10: 40px; --ds-sp-12: 48px;
    --ds-sp-16: 64px;

    /* Layout */
    --ds-header-h: 64px;
    --ds-page-pad-x: 28px;
    --ds-page-max-w: 1200px;
    --ds-card-pad: 24px;
    --ds-card-gap: 24px;
    --ds-bp-lg: 1024px;

    /* Altezze dei controlli (size/control/*) */
    --ds-h-sm: 32px;   /* Button sm · IconButton inline */
    --ds-h: 40px;      /* Button md · IconButton · Avatar */
    --ds-h-md: 38px;   /* SearchField */
    --ds-h-lg: 44px;   /* Button lg · Input · Select — anche tap-min */
    --ds-h-xl: 48px;

    /* Movimento: una curva, due durate. Niente rimbalzi. */
    --ds-dur: 150ms;        /* sfondo, colore, ombra: tutti gli hover */
    --ds-dur-menu: 200ms;   /* ciò che si apre */
    --ds-ease: ease-out;

    /* Compatibilità col nome storico del brand token */
    --oxq-primary: var(--ds-accent);
    --oxq-primary-light: var(--ds-accent-soft);
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/fonts/InterVariable-Italic.woff2') format('woff2');
}