/*
 * Rafa Guttierrez — Design Tokens
 * "As 6 Cores da Rafa" (THE SIX): a identidade cromática nasce do cabelo
 * multicolorido da artista. Rosa é a cor principal; as demais cinco são
 * usadas como acentos pontuais (detalhes, strokes, hover, ícones).
 */

:root {
    /* ===== BASE ===== */
    --rafa-black: #0D0D0F;
    --rafa-surface: #151518;
    --rafa-surface-2: #1D1D22;
    --rafa-surface-3: #26262C;

    --rafa-white: #FFFFFF;
    --rafa-off-white: #F5F4F2;
    --rafa-muted: #AAA7AE;
    --rafa-muted-2: #6E6C72;

    --rafa-border: rgba(255, 255, 255, 0.12);
    --rafa-border-strong: rgba(255, 255, 255, 0.22);

    /* ===== AS 6 CORES DA RAFA ===== */
    --rafa-pink: #FF2D9A;
    --rafa-purple: #9B3CFF;
    --rafa-blue: #209BFF;
    --rafa-green: #39D98A;
    --rafa-yellow: #FFD93D;
    --rafa-orange: #FF7A32;

    /* ===== PRIMÁRIA ===== */
    --rafa-primary: var(--rafa-pink);
    --rafa-primary-contrast: var(--rafa-white);

    /* ===== ASSINATURA — GRADIENTE DAS SEIS CORES ===== */
    --rafa-hair-gradient: linear-gradient(
        90deg,
        var(--rafa-pink) 0%,
        var(--rafa-purple) 20%,
        var(--rafa-blue) 40%,
        var(--rafa-green) 60%,
        var(--rafa-yellow) 80%,
        var(--rafa-orange) 100%
    );

    /* ===== TIPOGRAFIA ===== */
    --font-display: 'Bebas Neue', Impact, sans-serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-accent: var(--font-display);

    --fs-display-xl: clamp(3rem, 4vw + 2rem, 8rem);
    --fs-display: clamp(2.5rem, 3vw + 1.5rem, 5.5rem);
    --fs-h1: clamp(2rem, 2vw + 1.4rem, 3.5rem);
    --fs-h2: clamp(1.6rem, 1.4vw + 1.2rem, 2.5rem);
    --fs-h3: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
    --fs-body-lg: clamp(1.05rem, 0.3vw + 0.95rem, 1.25rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;

    /* ===== ESPAÇAMENTO ===== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* ===== RADIUS — estética editorial, não excessivamente redonda ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ===== SOMBRA ===== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-glow-pink: 0 0 32px rgba(255, 45, 154, 0.25);

    /* ===== LAYOUT ===== */
    --container-width: 1440px;
    --container-padding: clamp(1.25rem, 4vw, 4rem);

    /* ===== TRANSIÇÃO ===== */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 180ms var(--ease-standard);
    --transition-base: 280ms var(--ease-standard);
    --transition-slow: 550ms var(--ease-standard);

    /* ===== Z-INDEX ===== */
    --z-header: 100;
    --z-drawer: 200;
    --z-lightbox: 300;
    --z-toast: 400;
    --z-intro: 500;
    --z-cursor: 600;
}