/* =============================================================
   PHPH.com.br — Design System / Tokens
   Tema "navy evoluído + ciano elétrico" com light & dark mode.
   Carregado ANTES de style.css e typography.css.
   ============================================================= */

:root {
    /* ---- Tipografia ---- */
    --font-ui: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Consolas, Monaco, monospace;

    /* Escala fluida (clamp: mín, preferido, máx) */
    --fs-xs:   clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
    --fs-sm:   clamp(0.82rem, 0.79rem + 0.15vw, 0.90rem);
    --fs-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
    --fs-md:   clamp(1.05rem, 1.00rem + 0.3vw, 1.20rem);
    --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.55rem);
    --fs-xl:   clamp(1.55rem, 1.35rem + 1.0vw, 2.10rem);
    --fs-2xl:  clamp(2.00rem, 1.65rem + 1.8vw, 3.00rem);

    /* ---- Espaçamento ---- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;

    /* ---- Raios ---- */
    --r-sm: 8px;
    --r: 12px;
    --r-lg: 16px;
    --r-xl: 22px;
    --r-full: 999px;

    /* ---- Transições ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 150ms var(--ease);
    --t: 250ms var(--ease);
    --t-slow: 400ms var(--ease);

    --container: 1200px;
    --header-h: 64px;

    /* ===========================================================
       PALETA — TEMA CLARO (default)
       =========================================================== */
    --bg: #F6F8FB;
    --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, 0.06), transparent 60%),
               radial-gradient(900px 500px at -10% 0%, rgba(26, 77, 143, 0.06), transparent 55%);
    --surface: #FFFFFF;
    --surface-2: #EEF3F9;
    --surface-glass: rgba(255, 255, 255, 0.72);

    --border: #E3E9F1;
    --border-strong: #CBD7E6;

    --text: #16202E;
    --text-muted: #566476;
    --text-faint: #8593A4;

    /* Marca (navy) — usado no header/footer */
    --brand-1: #0F2557;
    --brand-2: #1A4D8F;
    --on-brand: #FFFFFF;
    --on-brand-muted: #B8D4F1;
    --header-grad: linear-gradient(135deg, #0F2557 0%, #1A4D8F 100%);

    /* Acento (ciano elétrico) */
    --accent: #0E8FB0;          /* interativo sobre fundo claro (contraste AA) */
    --accent-strong: #0B7693;
    --accent-bright: #22D3EE;   /* brilho/realce sobre fundo escuro */
    --accent-soft: rgba(14, 143, 176, 0.10);
    --on-accent: #06222B;

    --link: var(--accent);
    --link-hover: var(--accent-strong);

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(15, 37, 87, 0.06), 0 1px 3px rgba(15, 37, 87, 0.05);
    --shadow: 0 4px 12px rgba(15, 37, 87, 0.08), 0 2px 4px rgba(15, 37, 87, 0.04);
    --shadow-lg: 0 12px 32px rgba(15, 37, 87, 0.14), 0 4px 10px rgba(15, 37, 87, 0.06);
    --shadow-accent: 0 6px 20px rgba(14, 143, 176, 0.28);

    /* Cor por categoria (hue ajustada por JS via --cat-h) */
    --cat-h: 213;
    --cat: hsl(var(--cat-h) 64% 42%);
    --cat-soft: hsl(var(--cat-h) 70% 95%);
    --cat-border: hsl(var(--cat-h) 60% 80%);

    color-scheme: light;
}

/* ===========================================================
   PALETA — TEMA ESCURO
   =========================================================== */
:root[data-theme="dark"] {
    --bg: #0B1220;
    --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, 0.10), transparent 60%),
               radial-gradient(900px 500px at -10% 0%, rgba(37, 99, 172, 0.12), transparent 55%);
    --surface: #131C2E;
    --surface-2: #1B2638;
    --surface-glass: rgba(19, 28, 46, 0.72);

    --border: #25324A;
    --border-strong: #36486690;

    --text: #E7EEF7;
    --text-muted: #A2B2C8;
    --text-faint: #6E7E96;

    --brand-1: #0A1322;
    --brand-2: #14233E;
    --on-brand: #EAF1FB;
    --on-brand-muted: #93AECE;
    --header-grad: linear-gradient(135deg, #0A1322 0%, #16243F 100%);

    --accent: #38D2EC;          /* links/realces sobre escuro */
    --accent-strong: #6FE3F5;
    --accent-bright: #22D3EE;
    --accent-soft: rgba(56, 210, 236, 0.14);
    --on-accent: #04222B;

    --link: var(--accent);
    --link-hover: var(--accent-strong);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 6px 22px rgba(34, 211, 238, 0.28);

    --cat: hsl(var(--cat-h) 70% 66%);
    --cat-soft: hsl(var(--cat-h) 45% 18%);
    --cat-border: hsl(var(--cat-h) 40% 34%);

    color-scheme: dark;
}

/* ===========================================================
   RESET + BASE
   =========================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--t), color var(--t);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; font-weight: 700; }

a { color: var(--link); transition: color var(--t-fast); }
a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; }

::selection { background: var(--accent-soft); color: var(--text); }

/* Foco acessível */
:focus-visible {
    outline: 3px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }

/* Acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}