/* ═══════════════════════════════════════════
   NEXO DESIGN TOKENS
   Fonte única de verdade para cores, tipografia,
   espaçamentos e sombras da marca.
   ═══════════════════════════════════════════ */

:root {
    /* ── Brand ── */
    --amber: #FF6B35;
    --amber-dark: #e65100;
    --amber-text: #E55A20;      /* WCAG AA em fundo claro */
    --terracotta: #C08075;

    /* ── Dark Surfaces ── */
    --charcoal: #1E1E1E;
    --bg-dark: #0A0A0A;
    --bg-body-dark: #121212;
    --surface-dark: #141414;
    --surface-dark-2: #1E1E1E;
    --surface-dark-3: #252525;

    /* ── Light Surfaces ── */
    --bg-body-light: #F8F9FC;
    --surface-light: #FFFFFF;

    /* ── Text (dark mode) ── */
    --text-white: #FFFFFF;
    --off-white: #EAEAEA;
    --muted: #888;
    --gray-30: #444;

    /* ── Text (light mode) ── */
    --text-title-light: #111827;
    --text-body-light: #374151;
    --text-muted-light: #6B7280;

    /* ── Borders ── */
    --border-dark: #2a2a2a;
    --border-dark-2: #333;
    --border-light: #eee;

    /* ── Status / Semantic ── */
    --success: #2ecc71;
    --error: #e74c3c;
    --warning: #ffc107;
    --info: #3498db;
    --whatsapp: #25D366;

    /* ── Radii ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 100px;

    /* ── Shadows ── */
    --shadow-soft: 0 4px 20px -2px rgba(0,0,0,0.05);
    --shadow-float: 0 20px 40px -5px rgba(0,0,0,0.1);
    --shadow-card: 0 4px 15px rgba(0,0,0,0.06);
    --shadow-dark: 0 8px 24px rgba(0,0,0,0.4);

    /* ── Typography ── */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-patient-heading: 'Playfair Display', serif;
    --font-patient-body: 'Plus Jakarta Sans', sans-serif;

    /* ── Transitions ── */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}

/* ═══ SKELETON SHIMMER ═══ */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}
.skeleton-light {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}
.skeleton-text { height: 14px; margin-bottom: 10px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 16px; }
.skeleton-block { height: 60px; margin-bottom: 12px; }
.skeleton-circle { border-radius: 50%; }