/* ============================================================
   YesWeTicket · V3 · Design tokens
   Font única de decisió visual: docs/design-system-v3.md
   ============================================================ */

:root {
    /* ---------- Superfícies ---------- */
    --paper:     #FBFAF8;
    --paper-2:   #F4F2EE;
    --line:      #E7E3DC;
    --white:     #FFFFFF;

    /* ---------- Tinta ---------- */
    --ink-900:   #171412;
    --ink-600:   #5A544D;

    /* ---------- Marca ---------- */
    --brand-600: #D81921;
    --brand-700: #B0141B;
    --brand-050: #FBECEC;

    /* ---------- Escenari (única banda fosca) ---------- */
    --stage-950: #141017;
    --on-stage:      rgba(255, 255, 255, 0.92);
    --on-stage-soft: rgba(255, 255, 255, 0.80);
    --on-stage-line: rgba(255, 255, 255, 0.22);

    /* ---------- Accent "llum d'escenari" ----------
       Només decoratiu: subratllats, guions, gradients.
       MAI color d'acció. MAI text sobre fons clar (no passa AA);
       com a text només sobre --stage-950 (6,8:1). */
    --gold-500:  #C9922E;

    /* ---------- Funcional ---------- */
    --ok-600:    #2E7D43;

    /* ---------- Tipografia ---------- */
    --font-display: 'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-display: clamp(2.75rem, 5vw, 4rem);       /* H1 */
    --text-h2:      clamp(2rem, 3.5vw, 2.5rem);
    --text-h3:      1.25rem;
    --text-lg:      1.125rem;
    --text-md:      1rem;
    --text-sm:      0.875rem;
    --text-xs:      0.75rem;                          /* mínim absolut: 12px */

    /* ---------- Espaiat (base 4px) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;

    /* ---------- Layout ---------- */
    --container:        1200px;
    --container-narrow: 800px;
    --gutter:           24px;

    /* ---------- Radis ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* ---------- Elevació (el to per defecte és la vora hairline) ---------- */
    --shadow-sm: 0 4px 12px rgba(23, 20, 18, 0.05);
    --shadow-md: 0 8px 24px rgba(23, 20, 18, 0.06);

    /* ---------- Moviment ---------- */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);
}