/* =============================================
   its-variables.css
   Design system: Editorial luxury · Navy + Oro
   Cormorant Garamond + Inter + JetBrains Mono
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ── Sfondo ── */
    --its-bg:            #faf7f2;   /* carta calda */
    --its-surface:       #ffffff;
    --its-surface2:      #f3eee6;   /* sunk / hover */

    /* ── Bordi ── */
    --its-border:        #e7e1d4;
    --its-border-strong: #c9c1ad;

    /* ── Testo ── */
    --its-text:          #1a2238;   /* navy profondo dal logo */
    --its-text-2:        #3c4257;
    --its-text-dim:      #6b6f7d;
    --its-text-muted:    #8a8d97;

    /* ── Oro ── */
    --its-gold:          #c8a878;   /* il sole del logo */
    --its-gold-deep:     #a4844f;
    --its-gold-soft:     #efe2cc;

    /* ── Semantici ── */
    --its-success:       #6b8e6b;
    --its-danger:        #b54848;
    --its-warning:       #c98f6b;

    /* ── Ombre ── */
    --its-shadow:    0 1px 0 rgba(26,34,56,.04), 0 1px 3px rgba(26,34,56,.06);
    --its-shadow-md: 0 1px 0 rgba(26,34,56,.04), 0 8px 24px -8px rgba(26,34,56,.12);
    --its-overlay:   rgba(26,34,56,.50);

    /* ── Mark / avatar hero (gradient navy + alone oro) ── */
    --its-mark-gradient:
        radial-gradient(circle at 20% 25%, rgba(200, 168, 120, .22), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .18), transparent 55%),
        linear-gradient(135deg, var(--its-text) 0%, #2c3858 100%);

    /* ── Fonti ── */
    --its-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
    --its-sans:  "Inter", "Segoe UI", system-ui, sans-serif;
    --its-mono:  "JetBrains Mono", ui-monospace, "Courier New", monospace;

    /* ── Layout ── */
    --its-nav-w:      220px;
    --its-appbar-h:   56px;
    --its-radius:     8px;
    --its-radius-sm:  4px;
    --its-radius-lg:  14px;
}