/**
 * Beegray DS 2.0: tokens do site público (prefixo --bx-).
 * Fonte: docs/design-system/tokens.css + ajustes da seção 2 de SITE-PUBLICO-UX-UI.md.
 * Único arquivo com valores de cor; o restante do CSS usa só var(--bx-*).
 */
:root {
    color-scheme: light;

    /* Marca */
    --bx-honey-50: #FFF8E6;
    --bx-honey-200: #FFE08A;
    --bx-honey-500: #FFBD27;
    --bx-honey-600: #E0A616;
    --bx-honey-700: #C9920D;
    --bx-honey-rgb: 255, 189, 39;
    --bx-onyx-50: #F5F5F4;
    --bx-onyx-400: #8C8C88;
    --bx-onyx-500: #62625F;
    --bx-onyx-900: #1A1A1A;
    --bx-onyx-950: #111111;
    --bx-onyx-rgb: 17, 17, 17;
    --bx-wa: #25D366;

    /* Semânticas */
    --bx-success: #2F9E62;
    --bx-success-soft: #E5F6EC;
    --bx-danger: #D64545;
    --bx-danger-soft: #FDECEC;

    /* Papéis (modo claro: páginas de tenant) */
    --bx-canvas: #ECECEA;
    --bx-surface: #FFFFFF;
    --bx-surface-muted: #F6F6F5;
    --bx-surface-sunken: #EFEFED;
    --bx-text: var(--bx-onyx-900);
    --bx-text-muted: var(--bx-onyx-500);
    --bx-text-subtle: var(--bx-onyx-400);
    --bx-border: #E2E2DF;
    --bx-border-strong: #CFCFCB;
    --bx-accent: var(--bx-honey-500);
    --bx-accent-hover: var(--bx-honey-600);
    --bx-accent-active: var(--bx-honey-700);
    --bx-accent-soft: var(--bx-honey-50);
    --bx-on-accent: var(--bx-onyx-900);
    --bx-overlay: rgba(255, 255, 255, .92);
    --bx-hover-tint: rgba(26, 26, 26, .05);

    /* Tipografia */
    --bx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bx-fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --bx-fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
    --bx-fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
    --bx-fs-h3: clamp(1.25rem, 1.2rem + .25vw, 1.375rem);
    --bx-fs-h4: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
    --bx-fs-lead: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
    --bx-fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --bx-fs-small: .875rem;
    --bx-fs-eyebrow: clamp(.75rem, .73rem + .1vw, .8125rem);
    --bx-fs-metric: clamp(2.25rem, 1.8rem + 2vw, 3rem);

    /* Espaçamento (base 4 px; usar só estes) */
    --bx-space-1: 4px;
    --bx-space-2: 8px;
    --bx-space-3: 12px;
    --bx-space-4: 16px;
    --bx-space-6: 24px;
    --bx-space-8: 32px;
    --bx-space-12: 48px;
    --bx-space-16: 64px;
    --bx-space-24: 96px;

    /* Layout */
    --bx-container: 1200px;
    --bx-gutter: var(--bx-space-4);
    --bx-section-y: var(--bx-space-16);
    --bx-section-head-gap: var(--bx-space-8);

    /* Forma */
    --bx-radius-sm: 10px;
    --bx-radius-md: 12px;
    --bx-radius-lg: 20px;
    --bx-radius-xl: 28px;
    --bx-radius-pill: 999px;

    /* Sombra e foco */
    --bx-shadow-sm: 0 2px 8px rgba(26, 26, 26, .06);
    --bx-shadow-md: 0 8px 24px rgba(26, 26, 26, .08);
    --bx-shadow-lg: 0 20px 48px rgba(26, 26, 26, .12);
    --bx-shadow-accent: 0 8px 24px rgba(var(--bx-honey-rgb), .28);
    --bx-focus-ring: 0 0 0 4px rgba(var(--bx-honey-rgb), .35);

    /* Controles */
    --bx-control-sm: 40px;
    --bx-control-md: 48px;
    --bx-control-lg: 52px;

    /* Movimento */
    --bx-duration-fast: 140ms;
    --bx-duration-normal: 220ms;
    --bx-duration-slow: 360ms;
    --bx-ease: cubic-bezier(.2, .7, .2, 1);

    /* Camadas */
    --bx-z-sticky: 1020;
    --bx-z-bar: 1040;
    --bx-z-modal: 1050;
}

@media (min-width: 768px) {
    :root {
        --bx-gutter: var(--bx-space-6);
    }
}

@media (min-width: 1024px) {
    :root {
        --bx-section-y: var(--bx-space-24);
        --bx-section-head-gap: var(--bx-space-12);
        --bx-control-lg: 48px;
    }
}

@media (min-width: 1280px) {
    :root {
        --bx-gutter: var(--bx-space-8);
    }
}

[data-bx-theme="dark"] {
    color-scheme: dark;
    --bx-canvas: #111111;
    --bx-surface: #1A1A1A;
    --bx-surface-muted: #222221;
    --bx-surface-sunken: #161616;
    --bx-text: #F5F5F4;
    --bx-text-muted: #A3A3A0;
    --bx-text-subtle: #75756F;
    --bx-border: #2C2C2B;
    --bx-border-strong: #3D3D3B;
    --bx-accent-soft: rgba(var(--bx-honey-rgb), .12);
    --bx-success-soft: rgba(47, 158, 98, .16);
    --bx-danger-soft: rgba(214, 69, 69, .16);
    --bx-overlay: rgba(var(--bx-onyx-rgb), .94);
    --bx-hover-tint: rgba(255, 255, 255, .06);
    --bx-shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
    --bx-shadow-md: 0 8px 24px rgba(0, 0, 0, .4);
    --bx-shadow-lg: 0 20px 48px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bx-duration-fast: .01ms;
        --bx-duration-normal: .01ms;
        --bx-duration-slow: .01ms;
    }
}