/* ==========================================================================
   Di Mauro — Scrittore | Design Tokens
   Palette "Sicilia Raffinata", reset, tipografia base, accessibilita
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
    /* Colori primari */
    --color-primary:       #C4623A; /* Terracotta Etneo */
    --color-secondary:     #1A3A5C; /* Blu Notte */
    --color-accent:        #D4A942; /* Oro Antico */

    /* Sfondi */
    --color-bg:            #F7F4EF; /* Crema Papiro */
    --color-surface:       #EDE8DF; /* Sabbia Chiara */

    /* Testo */
    --color-text:          #2B2B2B; /* Nero Carbone */
    --color-text-light:    #686868; /* Grigio Pietra */

    /* Feedback */
    --color-success:       #2D8B46;
    --color-error:         #C0392B;

    /* Varianti con opacita */
    --color-primary-05:    rgba(196, 98, 58, 0.05);
    --color-primary-10:    rgba(196, 98, 58, 0.1);
    --color-primary-20:    rgba(196, 98, 58, 0.2);
    --color-primary-30:    rgba(196, 98, 58, 0.3);
    --color-primary-light: #D4845F;
    --color-primary-dark:  #A04E2A;
    --color-secondary-05:  rgba(26, 58, 92, 0.05);
    --color-secondary-10:  rgba(26, 58, 92, 0.1);
    --color-secondary-20:  rgba(26, 58, 92, 0.2);
    --color-secondary-30:  rgba(26, 58, 92, 0.3);
    --color-secondary-light: #2A5A8C;
    --color-secondary-dark:  #0E2340;
    --color-overlay:       rgba(43, 43, 43, 0.55);

    /* Gradienti */
    --gradient-hero:       linear-gradient(135deg, rgba(26, 58, 92, 0.85) 0%, rgba(196, 98, 58, 0.65) 100%);
    --gradient-primary:    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-card-hover: linear-gradient(to top, rgba(26, 58, 92, 0.85) 0%, transparent 60%);
    --gradient-surface:    linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);

    /* Glassmorphism */
    --glass-bg:     rgba(247, 244, 239, 0.7);
    --glass-blur:   16px;
    --glass-border: rgba(255, 255, 255, 0.3);

    /* --------------------------------------------------------------------------
       2. Tipografia
       -------------------------------------------------------------------------- */
    --font-heading:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-literary:  'Lora', Georgia, serif;

    /* Pesi */
    --fw-light:   300;
    --fw-regular: 400;
    --fw-semi:    600;
    --fw-bold:    700;

    /* Dimensioni — scala fluida clamp(min, preferred, max) */
    --fs-display:  clamp(3.5rem, 7vw + 1rem, 6.5rem);      /* 56-104px — hero */
    --fs-h1:       clamp(2.5rem, 4vw + 1rem, 4.5rem);       /* 40-72px */
    --fs-h2:       clamp(2rem, 3vw + 0.5rem, 3rem);         /* 32-48px */
    --fs-h3:       clamp(1.5rem, 2vw + 0.5rem, 2rem);       /* 24-32px */
    --fs-h4:       clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);  /* 20-24px */
    --fs-quote:    clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);  /* 24-36px */
    --fs-body:     clamp(1rem, 1vw + 0.25rem, 1.125rem);     /* 16-18px */
    --fs-literary: clamp(1.125rem, 1vw + 0.25rem, 1.25rem);  /* 18-20px */
    --fs-meta:     clamp(0.8125rem, 0.8vw + 0.2rem, 0.875rem); /* 13-14px */
    --fs-btn:      clamp(0.875rem, 0.9vw + 0.2rem, 1rem);   /* 14-16px */

    /* Interlinea */
    --lh-heading: 1.2;
    --lh-body:    1.7;
    --lh-quote:   1.5;

    /* --------------------------------------------------------------------------
       3. Spaziature e Griglia
       -------------------------------------------------------------------------- */
    --grid-max-width:  1280px;
    --grid-columns:    12;
    --grid-gutter:     24px;

    /* Spaziature verticali sezioni */
    --section-py:      clamp(4rem, 8vw, 10rem);   /* piu generoso */
    --section-py-sm:   clamp(2rem, 4vw, 4rem);

    /* Spaziature generiche */
    --space-xs:  0.25rem; /* 4px */
    --space-sm:  0.5rem;  /* 8px */
    --space-md:  1rem;    /* 16px */
    --space-lg:  1.5rem;  /* 24px */
    --space-xl:  2rem;    /* 32px */
    --space-2xl: 3rem;    /* 48px */
    --space-3xl: 4rem;    /* 64px */
    --space-4xl: 5rem;    /* 80px */

    /* Card */
    --card-padding:    clamp(1.5rem, 2vw, 2rem);
    --card-radius:     8px;

    /* Bottoni */
    --btn-padding-y:   0.75rem;
    --btn-padding-x:   1.75rem;
    --btn-radius:      6px;

    /* Letter-spacing */
    --ls-tight:  -0.02em;
    --ls-normal:  0;
    --ls-wide:    0.05em;
    --ls-ultra:   0.12em;

    /* Content widths */
    --content-xs: 540px;
    --content-sm: 680px;
    --content-md: 800px;
    --content-lg: 1024px;

    /* Border radius scale */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* --------------------------------------------------------------------------
       4. Transizioni e ombre
       -------------------------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-base:   300ms ease;
    --transition-slow:   500ms ease;
    --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 800ms cubic-bezier(0.16, 1, 0.3, 1);

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl:   0 12px 40px rgba(0, 0, 0, 0.15);
    --shadow-2xl:  0 20px 60px rgba(0, 0, 0, 0.18);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.14);
    --shadow-glow: 0 0 20px var(--color-primary-30);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* --------------------------------------------------------------------------
       5. Z-index
       -------------------------------------------------------------------------- */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-tooltip:   500;
}


/* ==========================================================================
   6. Reset / Normalize
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-primary);
}

ul,
ol {
    list-style: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}


/* ==========================================================================
   7. Tipografia base
   ========================================================================== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-family: var(--font-heading);
    line-height: var(--lh-heading);
    color: var(--color-secondary);
    font-weight: var(--fw-bold);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }

p + p {
    margin-top: var(--space-md);
}

blockquote,
.citazione {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: var(--fs-quote);
    line-height: var(--lh-quote);
    color: var(--color-secondary);
}

.testo-letterario {
    font-family: var(--font-literary);
    font-size: var(--fs-literary);
    line-height: 1.8;
}

.testo-meta {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: var(--fw-light);
    color: var(--color-text-light);
}


/* ==========================================================================
   8. Focus e Accessibilita
   ========================================================================== */

/* Focus visibile per navigazione da tastiera */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip to content */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-secondary);
    color: #fff;
    font-weight: var(--fw-semi);
    z-index: var(--z-tooltip);
    border-radius: var(--btn-radius);
}

.skip-link:focus {
    top: var(--space-md);
}

/* Nasconde visivamente ma resta accessibile agli screen reader */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}