/* =============================================================
   BASE.CSS — Reset, variabili, elementi fondamentali
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* --- Custom Properties --- */
:root {
    /* Colori brand */
    --c-brand:      #1a3a5c;
    --c-brand-dark: #0f2740;
    --c-brand-mid:  #2a5280;
    --c-accent:     #e8612a;
    --c-accent-dk:  #c94e1e;
    --c-accent-lt:  #f07a4a;

    /* Testo */
    --c-text:       #1e1e2e;
    --c-muted:      #5c6b7a;
    --c-subtle:     #8fa0b0;

    /* Superfici */
    --c-bg:         #f7f5f2;
    --c-white:      #ffffff;
    --c-surface:    #eceae7;
    --c-surface-2:  #e2dfd9;
    --c-dark:       #0f1f2d;
    --c-dark-2:     #162435;

    /* Bordi */
    --c-border:     #d8d4ce;
    --c-border-lt:  #e8e5e0;

    /* Stato */
    --c-success:    #22863a;
    --c-error:      #c0392b;

    /* Tipografia */
    --f-serif:  'DM Serif Display', Georgia, serif;
    --f-sans:   'Inter', system-ui, sans-serif;
    --f-mono:   'DM Mono', 'Courier New', monospace;

    /* Scala tipografica */
    --t-xs:   0.75rem;   /* 12px */
    --t-sm:   0.875rem;  /* 14px */
    --t-base: 1rem;      /* 16px */
    --t-lg:   1.125rem;  /* 18px */
    --t-xl:   1.25rem;   /* 20px */
    --t-2xl:  1.5rem;    /* 24px */
    --t-3xl:  1.875rem;  /* 30px */
    --t-4xl:  2.25rem;   /* 36px */
    --t-5xl:  3rem;      /* 48px */
    --t-6xl:  3.75rem;   /* 60px */
    --t-7xl:  4.5rem;    /* 72px */

    /* Spaziatura (4px base) */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* Border radius */
    --r-sm:   4px;
    --r-md:   8px;
    --r-lg:   12px;
    --r-xl:   20px;
    --r-full: 9999px;

    /* Ombra */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:  0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-xl:  0 20px 48px rgba(0,0,0,0.12);

    /* Transizioni */
    --tr-fast: 150ms ease;
    --tr-base: 250ms ease;
    --tr-slow: 400ms ease;

    /* Layout */
    --max-w: 1200px;
    --max-w-text: 720px;
    --header-h: 72px;
}

/* --- Reset moderno --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--f-sans);
    font-size: var(--t-base);
    line-height: 1.7;
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Elementi base --- */
img, video, svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--c-brand);
    text-decoration: none;
    transition: color var(--tr-fast);
}
a:hover { color: var(--c-accent); }

ul, ol { list-style: none; }

button, input, select, textarea {
    font-family: var(--f-sans);
    font-size: var(--t-base);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--f-serif);
    font-weight: 400;
    line-height: 1.2;
    color: var(--c-brand);
}

p { margin-bottom: 0; }

strong { font-weight: 600; }

::selection {
    background: var(--c-accent);
    color: white;
}

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}