/*
 * Folha global de estilo: design tokens, base e o que deles depende.
 * Carregada depois do CDN do Basecoat. Tema claro apenas.
 */

:root {
    color-scheme: light;

    --background: oklch(100% 0 0);
    --foreground: oklch(14.5% 0 0);
    --card: oklch(100% 0 0);
    --card-foreground: oklch(14.5% 0 0);
    --popover: oklch(100% 0 0);
    --popover-foreground: oklch(14.5% 0 0);
    --primary: oklch(20.5% 0 0);
    --primary-foreground: oklch(98.5% 0 0);
    --secondary: oklch(97% 0 0);
    --secondary-foreground: oklch(20.5% 0 0);
    --muted: oklch(97% 0 0);
    --muted-foreground: oklch(55.6% 0 0);
    --accent: oklch(97% 0 0);
    --accent-foreground: oklch(20.5% 0 0);
    --destructive: oklch(57.7% 0.245 27.325);
    --border: oklch(92.2% 0 0);
    --input: oklch(92.2% 0 0);
    --ring: oklch(70.8% 0 0);

    --radius: 0.625rem;

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --chart-1: oklch(64.6% 0.222 41.116);
    --chart-2: oklch(60% 0.118 184.704);
    --chart-3: oklch(39.8% 0.07 227.392);
    --chart-4: oklch(82.8% 0.189 84.429);
    --chart-5: oklch(76.9% 0.188 70.08);

    /* Cor fixa por país, alinhada às bandeiras (com tons distintos para contraste). */
    --country-br: oklch(58% 0.14 150); /* Brasil: verde */
    --country-us: oklch(52% 0.18 255); /* Estados Unidos: azul */
    --country-cn: oklch(56% 0.2 27);   /* China: vermelho */
    --country-jp: oklch(60% 0.1 15);   /* Japão: vermelho-rosado (distingue da China) */
    --country-eu: oklch(54% 0.16 285); /* Zona do Euro: azul-arroxeado */
    --country-default: oklch(55% 0.03 260); /* Neutro para países sem cor definida */
}

/*
 * Mapeia os tokens para o Tailwind. É necessário porque o @theme fica em CSS externo
 * e o Tailwind via CDN não gera sozinho as utilities derivadas (ex.: bg-background).
 */
@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
}

/* Estilos base. */
html {
    font-family: var(--font-sans);
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--foreground);
    /* Evita rolagem horizontal por elementos flutuantes (ex.: popovers ocultos). */
    overflow-x: clip;
}

/*
 * Utilities de token que o Tailwind via CDN não gera a partir do @theme externo.
 * Mantidas aqui para garantir o visual mesmo sem o processamento do @theme.
 */
.bg-background {
    background-color: var(--background);
}

.text-foreground {
    color: var(--foreground);
}

.bg-muted {
    background-color: var(--muted);
}

.text-muted-foreground {
    color: var(--muted-foreground);
}

.border-border {
    border-color: var(--border);
}

.text-primary {
    color: var(--primary);
}

/* Overrides globais de componentes do Basecoat. */
.btn {
    cursor: pointer;
}