/* ==========================================================================
   PERTROCA DESIGN TOKENS — FONTE ÚNICA DE VERDADE
   ==========================================================================
   Design system "gold" (sóbrio premium 2026, sem neon).

   - Cor de marca ÚNICA: dourado champanhe #C9A96E
     (light #E5C893 / deep #A48B5A)
   - Fundo base ÚNICO: #0A0A0A (theme-color das páginas também é #0A0A0A)
   - Tipografia: Inter (corpo) + Playfair Display (display)
   - Headlines em COR SÓLIDA (nunca background-clip: text)
   - Contraste: texto sobre #C9A96E deve ser escuro (#0A0A0A / gray-900),
     nunca branco.

   Qualquer mudança de token deve ser feita AQUI primeiro.
   Páginas que ainda carregam uma cópia local deste bloco (ex.: carteira.html)
   devem ser sincronizadas a partir deste arquivo.
   ========================================================================== */

:root {
    /* === Background layers === */
    --bg-base: #0A0A0A;
    --bg-surface-1: #0F0F0F;        /* Cards padrão */
    --bg-surface-2: #161616;        /* Elevados/hover */
    --bg-elevated: #1A1A1A;         /* Modais, inputs */

    /* === Borders === */
    --border-subtle: rgba(255,255,255,0.06);
    --border-default: rgba(201,169,110,0.10);
    --border-emphasis: rgba(201,169,110,0.22);
    --border-focus: rgba(201,169,110,0.40);

    /* === Brand: Gold === */
    --gold-light: #E5C893;
    --gold-primary: #C9A96E;
    --gold-deep: #A48B5A;
    --gold-glow: rgba(201,169,110,0.15);

    /* === Text === */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.65);
    --text-tertiary: rgba(255,255,255,0.40);
    --text-disabled: rgba(255,255,255,0.25);
    --text-gold: var(--gold-primary);

    /* === States === */
    --state-success: #34D399;
    --state-success-bg: rgba(52,211,153,0.10);
    --state-warning: #FBBF24;
    --state-warning-bg: rgba(251,191,36,0.08);
    --state-danger: #F87171;
    --state-danger-bg: rgba(248,113,113,0.10);
    --state-info: #60A5FA;

    /* === Type scale === */
    --text-2xs: 10px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-md: 17px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-3xl: 40px;

    /* === Tracking === */
    --tracking-tight: -0.02em;
    --tracking-normal: 0em;
    --tracking-wide: 0.02em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.15em;

    /* === Spacing === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* === Border radius === */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* === Shadows / glow === */
    --shadow-card: 0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 16px rgba(0,0,0,0.20);
    --shadow-hover: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.32), 0 0 0 1px var(--border-emphasis);
    --shadow-focus: 0 0 0 3px var(--gold-glow);

    /* === Easing === */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* === Font families === */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}