/*
 * Underskin — Design tokens
 *
 * Palette madre LOCKED: Sabbia & Terracotta (light).
 * Sub-brand accent (per artist) via ACF `accent_color`, applied inline as
 * `style="--artist-accent: #hex"` on artist page root. Falls back to --accent.
 */

:root {
    /* --- Base colors --- */
    --color-sand:       #ECDFC2; /* bg — sabbia calda */
    --color-sand-deep:  #DECFA8; /* surface — sabbia satura per card/sezioni */
    --color-ink:        #2A1E14; /* ink — bruno scurissimo (mai nero puro) */
    --color-terracotta: #C45A3E; /* accent — terracotta */
    --color-red:        #8B2020; /* alert — rosso ecclesiastico */

    /* --- Semantic tokens --- */
    --bg:       var(--color-sand);
    --surface:  var(--color-sand-deep);
    --ink:      var(--color-ink);
    --accent:   var(--color-terracotta);
    --alert:    var(--color-red);

    /* --- Sub-brand fallback --- */
    --artist-accent: var(--accent);

    /* --- Typography --- */
    --font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
    --font-signature: 'Claudius', var(--font-body);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: clamp(1.5rem, 2.5vw, 2.25rem);
    --font-size-xxl: clamp(2.25rem, 5vw, 4.5rem);
    --font-size-hero: clamp(3rem, 9vw, 8.5rem);
    --line-height-body: 1.6;
    --line-height-heading: 1.05;
    --letter-spacing-caps: 0.02em;

    /* --- Spacing --- */
    --space-xxs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-xxl: 6.25rem;

    /* --- Layout --- */
    --container-max: 1440px;
    --container-padding-desktop: 50px;
    --container-padding-mobile: 20px;
    --section-padding-desktop: 100px;
    --section-padding-mobile: 50px;
    --grid-gutter-desktop: 24px;
    --grid-gutter-mobile: 16px;
    --card-padding-desktop: 32px;
    --card-padding-mobile: 20px;

    /* --- Radius --- */
    --radius-default: 0;
    --radius-avatar: 999px;
    --radius-badge: 999px;

    /* --- Motion --- */
    --ease-default: cubic-bezier(0.2, 0.6, 0.2, 1);
    --duration-fast: 180ms;
    --duration-medium: 320ms;
    --duration-slow: 600ms;

    /* --- Z-index --- */
    /* Grain texture layer sta a 9998, header a 10001 (sopra grain).
       Cursor deve stare SOPRA tutto (anche header sticky e footer). */
    --z-cursor: 100000;
    --z-modal: 8000;
    --z-header: 10001;
    --z-marquee: 10;
}

/* --- Reduced motion overrides --- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-medium: 0ms;
        --duration-slow: 0ms;
    }
}