:root {
    /* Cores primárias */
    --color-primary: #F07E26;
    --color-primary-dark: #F07E26;
    --color-primary-light: #F07E26;
    --color-secondary: #212126;
    --color-secondary-light: #3F3F46;

    /* Superfícies — cinza YouTube com leve puxada pro azul */
    --color-accent: #27272D;
    --color-bg: #0F0F12;
    --color-bg-card: #212126;
    --color-bg-soft: #27272D;
    --color-surface-raised: #18181C;
    --color-overlay: rgba(15, 15, 18, 0.92);
    --color-overlay-soft: rgba(15, 15, 18, 0.4);

    /* Texto */
    --color-text: #F1F1F1;
    --color-text-light: #D9D9D9;
    --color-text-muted: #AAAAAA;
    --color-text-inverse: #0F0F12;

    /* Bordas */
    --color-border: rgba(255, 255, 255, 0.07);
    --color-border-strong: rgba(255, 255, 255, 0.12);
    --color-border-accent: var(--color-primary);

    /* Semânticas */
    --color-success: #34D399;
    --color-success-dark: #059669;
    --color-warning: #FBBF24;
    --color-warning-dark: #D97706;
    --color-error: #F87171;
    --color-error-dark: #DC2626;
    --color-info: #60A5FA;

    /* Semânticas com alpha */
    /* Laranja escurecido para texto sobre superfície clara: a primária pura
       rende só 2.7:1 sobre branco, abaixo do mínimo WCAG AA de 4.5:1. */
    --color-primary-on-light: #9A4A00;
    --color-primary-muted: rgba(240, 126, 38, 0.12);
    --color-primary-border: rgba(240, 126, 38, 0.2);
    --color-success-muted: rgba(52, 211, 153, 0.12);
    --color-success-border: rgba(52, 211, 153, 0.25);
    --color-warning-muted: rgba(251, 191, 36, 0.08);
    --color-warning-border: rgba(251, 191, 36, 0.2);
    --color-error-muted: rgba(248, 113, 113, 0.08);
    --color-error-border: rgba(248, 113, 113, 0.15);
    --color-info-muted: rgba(96, 165, 250, 0.12);
    --color-info-border: rgba(96, 165, 250, 0.25);
    --color-surface-muted: rgba(255, 255, 255, 0.04);
    --color-surface-hover: rgba(255, 255, 255, 0.08);

    /* Links e CTA */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-light);
    --color-focus: var(--color-primary);
    --color-cta: var(--color-primary);
    --color-cta-dark: var(--color-primary-dark);
    --color-cta-light: var(--color-primary-light);
    --color-text-accent: var(--color-primary);
    --focus-ring: 0 0 0 3px rgba(240, 126, 38, 0.25);

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 48px rgba(240, 126, 38, 0.22);
    --shadow-glow-sm: 0 0 20px rgba(240, 126, 38, 0.18);
    --shadow-primary: 0 8px 24px rgba(240, 126, 38, 0.25);
    --shadow-primary-hover: 0 14px 36px rgba(240, 126, 38, 0.35);
    --shadow-success: 0 8px 24px rgba(52, 211, 153, 0.25);

    /* Glass */
    --glass-bg: rgba(33, 33, 38, 0.72);
    --glass-bg-strong: rgba(33, 33, 38, 0.88);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 20px;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-full: 9999px;

    /* Grade de fotos do cliente — mosaico justificado (ordem original).
       JS lê --gallery-row-* via getComputedStyle na .gallery-grid. */
    --gallery-gap: 4px;
    --gallery-radius: 6px;
    --gallery-row-target: 320px;
    --gallery-row-min: 230px;
    --gallery-row-max: 400px;

    /* Logo (altura / largura máx. — ajuste centralizado) */
    --logo-size-cliente: 26.4px;
    --logo-size-cliente-max: 132px;
    --logo-size-home-nav: 43.2px;
    --logo-size-home-nav-max: 192px;
    --logo-size-footer: 33.6px;
    --logo-size-acesso: 54px;
    --logo-size-acesso-max: 264px;
    --logo-size-acesso-max-sm: 240px;
    --logo-size-login: 54px;
    --logo-size-email: 168px;

    /* Transições */
    --transition-fast: 150ms ease;
    --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Tipografia */
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.75rem;
    --line-height-tight: 1.15;
    --line-height-normal: 1.6;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide: 0.08em;

    /* Espaçamento */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Layout */
    --header-height: 72px;
    --container-max: 1200px;
    --container-padding: 24px;

    /* Skeleton */
    --skeleton-base: var(--color-bg-soft);
    --skeleton-shine: var(--color-secondary-light);

    /* ==========================================================================
       FUNDAÇÃO RESPONSIVA (Fase 0 do redesign)
       Tokens novos. Nada acima desta linha foi alterado — as escalas antigas
       (--font-size-*, --spacing-*) continuam valendo para o CSS legado.
       ========================================================================== */

    /* Breakpoints — 4 nomes oficiais. `var()` não funciona dentro de @media,
       então estes valores são documentação + consumo por JS
       (getComputedStyle(document.documentElement).getPropertyValue('--bp-md')).
       Escreva sempre o número literal no @media:
         sm  @media (min-width: 480px)  / (max-width: 479px)
         md  @media (min-width: 768px)  / (max-width: 767px)
         lg  @media (min-width: 1024px) / (max-width: 1023px)
         xl  @media (min-width: 1280px) / (max-width: 1279px)
       Mobile-first: prefira min-width. Os breakpoints legados soltos
       (560/600/640/720/782/1100) não devem ser usados em CSS novo. */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;

    /* Tipografia fluida — clamp(min @360px, curva, max @1280px).
       Use nas telas redesenhadas; a escala fixa segue existindo. */
    --font-size-fluid-xs: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem);
    --font-size-fluid-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);
    --font-size-fluid-base: clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
    --font-size-fluid-lg: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
    --font-size-fluid-xl: clamp(1.0625rem, 0.99rem + 0.33vw, 1.25rem);
    --font-size-fluid-2xl: clamp(1.25rem, 1.15rem + 0.43vw, 1.5rem);
    --font-size-fluid-3xl: clamp(1.5rem, 1.3rem + 0.87vw, 2rem);
    --font-size-fluid-4xl: clamp(1.875rem, 1.53rem + 1.52vw, 2.75rem);
    --font-size-fluid-display: clamp(2.25rem, 1.76rem + 2.17vw, 3.5rem);

    /* Complementos de ritmo tipográfico */
    --line-height-snug: 1.35;
    --line-height-relaxed: 1.75;
    --letter-spacing-tighter: -0.03em;
    --letter-spacing-normal: 0;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 800;

    /* Espaçamento responsivo — cresce com a viewport */
    --space-fluid-2xs: clamp(0.25rem, 0.8vw, 0.5rem);
    --space-fluid-xs: clamp(0.5rem, 1.2vw, 0.75rem);
    --space-fluid-sm: clamp(0.75rem, 1.8vw, 1rem);
    --space-fluid-md: clamp(1rem, 2.5vw, 1.5rem);
    --space-fluid-lg: clamp(1.5rem, 3.5vw, 2.5rem);
    --space-fluid-xl: clamp(2rem, 5vw, 4rem);
    --space-fluid-2xl: clamp(2.5rem, 7vw, 6rem);
    /* Respiro vertical entre blocos de uma página */
    --space-section: clamp(2.5rem, 6vw, 5rem);
    /* Padding lateral do container (substitui --container-padding no CSS novo) */
    --space-gutter: clamp(1rem, 4vw, 1.5rem);

    /* Alvos de toque e altura de controles (WCAG 2.5.5 / HIG: 44px) */
    --tap-min: 44px;
    --tap-min-lg: 56px;
    --control-height-sm: 36px;
    --control-height-md: 44px;
    --control-height-lg: 52px;

    /* Safe area (notch, home indicator, barra do iOS) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Shell de aplicativo */
    --header-height-mobile: 56px;
    --tabbar-height: 60px;
    /* Espaço a reservar no fim do conteúdo quando há bottom tab bar */
    --tabbar-space: calc(var(--tabbar-height) + var(--safe-bottom));
    --actionbar-height: 68px;
    --actionbar-space: calc(var(--actionbar-height) + var(--safe-bottom));
    /* 100dvh acompanha a barra do Safari iOS; 100vh não */
    --shell-min-height: 100dvh;
    --sheet-max-height: 88dvh;
    --sheet-radius: var(--radius-xl);
    --sheet-width-md: 520px;

    /* Larguras de conteúdo */
    --container-max-narrow: 720px;
    --container-max-wide: 1440px;
    /* Largura de leitura confortável (termos, privacidade, textos longos) */
    --content-measure: 68ch;

    /* Camadas — mantém a pilha existente explícita para não haver disputa:
       ambient 1 · conteúdo 3 · header 100 · action bar 1100 · tab bar 1200 ·
       sheet 9500 · lightbox 10000 · loader de boot 100000 · toast 100500 */
    --z-ambient: 1;
    --z-content: 3;
    --z-sticky: 90;
    --z-header: 100;
    --z-actionbar: 1100;
    --z-tabbar: 1200;
    --z-scrim: 9400;
    --z-sheet: 9500;
    --z-lightbox: 10000;
    --z-toast: 100500;

    /* Motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
    --transition-sheet: 320ms var(--ease-sheet);

    /* Superfícies do shell */
    --color-scrim: rgba(15, 15, 18, 0.62);
    --shadow-sheet: 0 -18px 48px rgba(0, 0, 0, 0.5);
    --shadow-tabbar: 0 -8px 24px rgba(0, 0, 0, 0.35);
    --shadow-actionbar: 0 -8px 24px rgba(0, 0, 0, 0.32);
}

@media (max-width: 767px) {
    :root {
        --gallery-gap: 3px;
        /* Retrato sozinho em largura cheia (~3:4). O teto evita foto mais alta que a tela. */
        --gallery-row-target: 480px;
        --gallery-row-min: 200px;
        --gallery-row-max: min(78dvh, 640px);
    }
}