/* =====================================================================
 * Terra Hash — Design Tokens (additivo)
 *
 * Este arquivo é 100% aditivo. Não redeclara nenhum token existente em
 * frontend/css/style.css (--brand-*, --auth-*, --shell-*, --page-bg*,
 * --top-bar-bg, etc.). Só introduz escalas faltantes e tokeniza a paleta
 * azul hardcoded do app autenticado.
 *
 * Como usar:
 *   1. No topo de frontend/index.html, adicione antes de style.css:
 *        <link rel="stylesheet" href="css/tokens.css">
 *   2. Substitua literais em style.css por var(--token). Veja
 *      este arquivo e o tema ativo definem o mapeamento visual.
 *
 * Safe-to-merge: este arquivo não conflita com edições em style.css.
 * ===================================================================== */

:root {
    /* -----------------------------------------------------------------
     * Paleta azul do app autenticado (antes hardcoded, agora tokenizada).
     * Responde a tema via overrides abaixo.
     * ----------------------------------------------------------------- */
    --app-ink: #17324a;            /* texto primário do app */
    --app-ink-soft: #4a6a82;       /* texto secundário sobre fundo claro */
    --app-blue: #2a5298;           /* gradient primary start */
    --app-blue-strong: #1e3c72;    /* gradient primary end */
    --app-cyan: #00a6fb;           /* accent filtros / highlights */
    --app-cyan-soft: #2b78ff;      /* accent filtros variante */
    --app-cyan-warm: #1399ff;      /* accent filtros variante */
    --upload-accent: #0f5132;      /* header do upload-modal (verde profundo) */
    --upload-accent-soft: #145d3c; /* gradient upload variante */

    --gradient-primary: linear-gradient(135deg, var(--app-blue) 0%, var(--app-blue-strong) 100%);
    --gradient-upload: linear-gradient(135deg, var(--app-ink) 0%, var(--upload-accent) 100%);

    /* -----------------------------------------------------------------
     * Neutros (substitui #333 / #666 / #f8f9fa / #6c757d / #e0e0e0 / #5a6268)
     * ----------------------------------------------------------------- */
    --neutral-0: #ffffff;
    --neutral-50: #f8f9fa;
    --neutral-100: #eef1f4;
    --neutral-200: #e0e4e8;
    --neutral-300: #c7cdd3;
    --neutral-400: #9aa3ad;
    --neutral-500: #6c757d;
    --neutral-600: #5a6268;
    --neutral-700: #3c4450;
    --neutral-800: #252b33;
    --neutral-900: #12161c;

    --text-primary: var(--app-ink);
    --text-secondary: var(--app-ink-soft);
    --text-muted: var(--neutral-500);
    --text-disabled: var(--neutral-400);
    --text-on-dark: var(--neutral-0);

    --border-subtle: var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong: var(--neutral-400);

    /* -----------------------------------------------------------------
     * Glass / superfícies translúcidas (substitui rgba(255,255,255,0.08/0.12/0.06/0.03))
     * ----------------------------------------------------------------- */
    --glass-fill-1: rgba(255, 255, 255, 0.03);
    --glass-fill-2: rgba(255, 255, 255, 0.06);
    --glass-fill-3: rgba(255, 255, 255, 0.12);
    --glass-border-soft: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-strong: rgba(255, 255, 255, 0.22);

    /* -----------------------------------------------------------------
     * Spacing scale (4-based, 8 steps). Atual usa 6/7/8/9/10/11/12/14/15/16/18/20 mix;
     * arredonde para estes valores.
     * ----------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;
    --space-9: 64px;

    /* -----------------------------------------------------------------
     * Radius scale (substitui 5/7/9/10/11/12/14/15/16/18/20/22/24/28/32/999)
     * ----------------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* -----------------------------------------------------------------
     * Typography scale (hoje: 25 font-sizes únicos, 16 line-heights, 14 letter-spacings)
     * ----------------------------------------------------------------- */
    --font-sans: "Manrope", "Avenir Next", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Menlo", monospace;

    --fs-xs: 10px;      /* micro-labels, eyebrow */
    --fs-sm: 11px;      /* legendas, chips, meta */
    --fs-md: 12px;      /* body padrão do app (dominante) */
    --fs-base: 13px;    /* corpo reading */
    --fs-lg: 14px;      /* body destacado / botões */
    --fs-xl: 16px;      /* h3 / subtítulos */
    --fs-2xl: 18px;     /* h2 */
    --fs-3xl: 22px;     /* h1 inline */
    --fs-display-sm: clamp(20px, 2vw, 24px);
    --fs-display-md: clamp(24px, 2.8vw, 32px);
    --fs-display-lg: clamp(32px, 4vw, 48px);

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-loose: 0.08em;     /* dominante em uppercase labels */
    --ls-looser: 0.16em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* -----------------------------------------------------------------
     * Shadow scale (hoje: 87 box-shadows literais, 1 token)
     * ----------------------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(4, 21, 27, 0.06);
    --shadow-sm: 0 2px 6px rgba(4, 21, 27, 0.08);
    --shadow-md: 0 8px 20px rgba(4, 21, 27, 0.12);
    --shadow-lg: 0 16px 40px rgba(4, 21, 27, 0.16);
    --shadow-xl: 0 28px 80px rgba(4, 21, 27, 0.22);
    --shadow-focus: 0 0 0 3px rgba(200, 156, 83, 0.45);  /* focus ring mais visível que o atual 0.28 */
    --shadow-focus-danger: 0 0 0 3px rgba(203, 68, 68, 0.45);

    /* -----------------------------------------------------------------
     * Z-index scale (hoje: 2000/3000/5000 esparsos — tornar previsível)
     * ----------------------------------------------------------------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 500;
    --z-sidebar: 800;
    --z-dropdown: 1000;
    --z-modal-backdrop: 1900;
    --z-modal: 2000;
    --z-popover: 2500;
    --z-loading: 3000;
    --z-auth-screen: 5000;
    --z-toast: 6000;

    /* -----------------------------------------------------------------
     * Motion
     * ----------------------------------------------------------------- */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.2);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --duration-slower: 480ms;
}

/* =====================================================================
 * Overrides de tema — fix do bug: tokens do app e shadow agora respondem ao tema.
 *
 * O atual --auth-shadow tem cor embutida no rgba e não muda com o tema.
 * Os overrides abaixo recalculam a família de shadows + a paleta do app
 * para cada tema.
 * ===================================================================== */

:root[data-site-theme="aurora"],
body[data-site-theme="aurora"] {
    --app-ink: #173748;
    --app-ink-soft: #4b6a7a;
    --app-blue: #2d6683;
    --app-blue-strong: #1b4a67;
    --app-cyan: #3a9fd8;
    --app-cyan-soft: #4f8ad1;
    --app-cyan-warm: #2e7fbf;
    --upload-accent: #1a5c4e;
    --upload-accent-soft: #236a5b;

    --shadow-xs: 0 1px 2px rgba(16, 40, 59, 0.08);
    --shadow-sm: 0 2px 6px rgba(16, 40, 59, 0.1);
    --shadow-md: 0 8px 20px rgba(16, 40, 59, 0.14);
    --shadow-lg: 0 16px 40px rgba(16, 40, 59, 0.18);
    --shadow-xl: 0 28px 80px rgba(16, 40, 59, 0.26);
    --shadow-focus: 0 0 0 3px rgba(216, 176, 106, 0.5);
}

:root[data-site-theme="night"],
body[data-site-theme="night"] {
    --app-ink: #1b2745;
    --app-ink-soft: #4f5c7f;
    --app-blue: #334d8c;
    --app-blue-strong: #1e2b5c;
    --app-cyan: #6a83c4;
    --app-cyan-soft: #7c95d3;
    --app-cyan-warm: #5268a8;
    --upload-accent: #2a3d6c;
    --upload-accent-soft: #34497d;

    --shadow-xs: 0 1px 2px rgba(5, 8, 20, 0.12);
    --shadow-sm: 0 2px 6px rgba(5, 8, 20, 0.16);
    --shadow-md: 0 8px 20px rgba(5, 8, 20, 0.22);
    --shadow-lg: 0 16px 40px rgba(5, 8, 20, 0.3);
    --shadow-xl: 0 28px 80px rgba(5, 8, 20, 0.4);
    --shadow-focus: 0 0 0 3px rgba(216, 194, 124, 0.55);
}

/* =====================================================================
 * Utilitário: focus visível acessível.
 * Use em substituição a outline: none + box-shadow var(--focus-ring).
 * ===================================================================== */

.focus-ring:focus-visible,
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-gold, #c89c53);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}

/* =====================================================================
 * Utilitário a11y básico (antes só existia .sr-only em style.css:1158).
 * Duplicado aqui SEM conflito: seletor idêntico, declarações idênticas.
 * Se já estiver em style.css, ignore este bloco.
 * ===================================================================== */

.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link (hoje ausente — achado da auditoria de acessibilidade). */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-night, #04151b);
    color: var(--brand-cream, #f6ecdc);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    z-index: var(--z-toast);
    border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus {
    top: 0;
}