/* =====================================================================
   tokens.css — design tokens
   Única fonte de verdade para cor, espaço, tipografia, raio e sombra.
   Nenhum outro arquivo pode ter valor hardcoded desses eixos.
   ===================================================================== */

:root {
    /* ---------- Cor: paleta bruta ---------- */
    --cor-branco: #ffffff;
    --cor-preto: #000000;

    --cinza-50: #fbfbfd;
    --cinza-100: #f5f5f7;
    --cinza-200: #ececef;
    --cinza-300: #d9d9de;
    --cinza-400: #b6b6bd;
    --cinza-500: #86868b;
    --cinza-600: #6e6e73;
    --cinza-700: #48484a;
    --cinza-800: #2c2c2e;
    --cinza-900: #1c1c1e;
    --cinza-950: #101012;

    --azul-400: #4a9bff;
    --azul-500: #0071e3;
    --azul-600: #0058b0;

    --verde-400: #4cd07d;
    --verde-500: #22a04f;

    --ambar-400: #ffb648;
    --ambar-500: #e08600;

    --vermelho-400: #ff6961;
    --vermelho-500: #d92c20;

    --roxo-500: #7d5bed;

    /* ---------- Cor: papéis semânticos (tema claro) ---------- */
    --fundo-app: var(--cinza-100);
    --fundo-superficie: var(--cor-branco);
    --fundo-elevado: var(--cor-branco);
    --fundo-sutil: var(--cinza-50);
    --fundo-inverso: var(--cinza-900);

    --texto-forte: var(--cinza-900);
    --texto-padrao: var(--cinza-800);
    --texto-suave: var(--cinza-600);
    --texto-fraco: var(--cinza-500);
    --texto-inverso: var(--cor-branco);

    --borda-sutil: var(--cinza-200);
    --borda-media: var(--cinza-300);
    --borda-forte: var(--cinza-400);

    --acento: var(--azul-500);
    --acento-hover: var(--azul-600);
    --acento-suave: #e8f1fe;
    --acento-texto: var(--cor-branco);

    --sucesso: var(--verde-500);
    --sucesso-suave: #e6f7ec;
    --atencao: var(--ambar-500);
    --atencao-suave: #fff5e3;
    --perigo: var(--vermelho-500);
    --perigo-suave: #fdecea;
    --leech: var(--roxo-500);
    --leech-suave: #f0ebfe;

    /* Foco visível — acessibilidade de teclado */
    --anel-foco: 0 0 0 3px rgba(0, 113, 227, 0.35);

    /* ---------- Tipografia ---------- */
    --fonte-base: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue",
        Arial, sans-serif;
    --fonte-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --fonte-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;

    --texto-xs: 0.75rem;    /* 12px */
    --texto-sm: 0.8125rem;  /* 13px */
    --texto-md: 0.9375rem;  /* 15px */
    --texto-lg: 1.0625rem;  /* 17px — corpo padrão iOS */
    --texto-xl: 1.3125rem;  /* 21px */
    --texto-2xl: 1.75rem;   /* 28px */
    --texto-3xl: 2.25rem;   /* 36px */
    --texto-4xl: 3rem;      /* 48px */

    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semi: 600;
    --peso-forte: 700;

    --altura-apertada: 1.15;
    --altura-normal: 1.45;
    --altura-solta: 1.65;

    --tracking-apertado: -0.022em;
    --tracking-normal: 0;
    --tracking-largo: 0.04em;

    /* ---------- Espaçamento (escala 4px) ---------- */
    --esp-0: 0;
    --esp-1: 0.25rem;   /* 4 */
    --esp-2: 0.5rem;    /* 8 */
    --esp-3: 0.75rem;   /* 12 */
    --esp-4: 1rem;      /* 16 */
    --esp-5: 1.25rem;   /* 20 */
    --esp-6: 1.5rem;    /* 24 */
    --esp-8: 2rem;      /* 32 */
    --esp-10: 2.5rem;   /* 40 */
    --esp-12: 3rem;     /* 48 */
    --esp-16: 4rem;     /* 64 */
    --esp-20: 5rem;     /* 80 */

    /* ---------- Raio ---------- */
    --raio-sm: 8px;
    --raio-md: 12px;
    --raio-lg: 18px;
    --raio-xl: 24px;
    --raio-pilula: 999px;

    /* ---------- Sombra — leve, nunca dramática ---------- */
    --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.04);
    --sombra-foco: 0 0 0 4px var(--acento-suave);

    /* ---------- Layout ---------- */
    --largura-conteudo: 42rem;
    --largura-larga: 68rem;
    --altura-tabbar: 4rem;
    --largura-sidebar: 15rem;
    --alvo-toque: 44px; /* mínimo de área tocável */

    /* ---------- Camadas ---------- */
    --z-base: 1;
    --z-tabbar: 100;
    --z-cabecalho: 90;
    --z-modal: 200;
    --z-toast: 300;

    /* ---------- Movimento (usado por CSS simples; Anime.js cuida do resto) ---------- */
    --dur-rapida: 140ms;
    --dur-media: 240ms;
    --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Tema escuro: só remapeia os papéis semânticos ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --fundo-app: var(--cinza-950);
        --fundo-superficie: var(--cinza-900);
        --fundo-elevado: var(--cinza-800);
        --fundo-sutil: #161618;
        --fundo-inverso: var(--cinza-100);

        --texto-forte: #f5f5f7;
        --texto-padrao: #e4e4e7;
        --texto-suave: #a1a1a8;
        --texto-fraco: var(--cinza-500);
        --texto-inverso: var(--cinza-900);

        --borda-sutil: #2a2a2d;
        --borda-media: #3a3a3e;
        --borda-forte: #4d4d52;

        --acento: var(--azul-400);
        --acento-hover: #6fb0ff;
        --acento-suave: rgba(74, 155, 255, 0.16);
        --acento-texto: var(--cinza-950);

        --sucesso: var(--verde-400);
        --sucesso-suave: rgba(76, 208, 125, 0.16);
        --atencao: var(--ambar-400);
        --atencao-suave: rgba(255, 182, 72, 0.16);
        --perigo: var(--vermelho-400);
        --perigo-suave: rgba(255, 105, 97, 0.16);
        --leech: #a48bff;
        --leech-suave: rgba(164, 139, 255, 0.16);

        --anel-foco: 0 0 0 3px rgba(74, 155, 255, 0.45);
        --sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --sombra-md: 0 4px 16px rgba(0, 0, 0, 0.5);
        --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
        --sombra-foco: 0 0 0 4px var(--acento-suave);
    }
}