/*
 * tokens.ds.css — Design System "Luxury Dark"
 * Baseado em: css/design-systems/DESIGN_SYSTEM.md
 * 
 * Para REVERTER: no HTML de cada página, troque:
 *   <link rel="stylesheet" href="css/tokens.ds.css">
 * de volta para:
 *   <link rel="stylesheet" href="css/tokens.css">
 */

/* Google Fonts carregadas via <link> no HTML — não usar @import aqui para evitar bloqueio de render */

:root {
    /* --- Cores — Paleta Luxury Dark --- */
    --bg: #050505;
    --bg-alt: #0a0a0a;
    --surface: #111111;
    --border: rgba(255, 255, 255, 0.06);
    --border-md: rgba(255, 255, 255, 0.10);
    --text: #ffffff;
    --text-muted: #a8adb5;
    --accent: #c5a47e;
    /* Bronze/Ouro fosco */
    --accent-dark: #a8845e;
    --cta-bg: #0a0a0a;
    --cta-text: #ffffff;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: 12px;

    /* --- Tipografia --- */
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;

    /* --- Type Scale (igual ao original) --- */
    --ts-xs: 0.75rem;
    --ts-sm: 0.875rem;
    --ts-base: 1rem;
    --ts-md: 1.0625rem;
    --ts-lg: 1.125rem;
    --ts-xl: 1.25rem;
    --ts-2xl: 1.5rem;
    --ts-3xl: 2rem;
    --ts-hero: clamp(3.5rem, 9vw, 8rem);

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

    /* --- Outros tokens --- */
    --max-w: 1200px;
    --max-w-text: 640px;
    --radius: 1.5rem;
    /* arredondamento generoso (bento) */
    --dur: 0.25s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.6);

    /* Nav glassmorphism — tema-específico */
    --nav-bg: rgba(5, 5, 5, 0.82);

    /* Shadows metálicas */
    --glow-accent: 0 0 24px rgba(197, 164, 126, 0.25);
}

/* Dark mode explícito */
[data-theme="dark"] {
    --bg: #050505;
    --bg-alt: #0a0a0a;
    --surface: #111111;
    --border: rgba(255, 255, 255, 0.06);
    --border-md: rgba(255, 255, 255, 0.10);
    --text: #ffffff;
    --text-muted: #a8adb5;
    --cta-bg: #0a0a0a;
    --cta-text: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --nav-bg: rgba(5, 5, 5, 0.82);
}

/* Light mode — Paleta Linho/Creme Editorial */
[data-theme="light"] {
    --bg: #f5f0ea;
    /* fundo linho quente */
    --bg-alt: #ece6dc;
    /* superfície levemente mais escura */
    --surface: #e0d8cc;
    /* cards e painéis */
    --border: rgba(26, 18, 8, 0.08);
    --border-md: rgba(26, 18, 8, 0.15);
    --text: #1a1208;
    /* quase preto quente */
    --text-muted: #6b5e4e;
    /* marrom médio — legível e elegante */
    --cta-bg: #1a1208;
    --cta-text: #f5f0ea;
    --glass-bg: rgba(26, 18, 8, 0.04);
    --glass-border: rgba(26, 18, 8, 0.12);
    --nav-bg: rgba(245, 240, 234, 0.92);
}