/* ═══════════════════════════════════════════
   base.css — Reset, Tipografia, Variáveis
   Visual Doxa · A expressão de beleza com propósito.
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

@font-face {
  font-family: 'Open Sauce';
  src: url('../fonts/OpenSauceOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('../fonts/OpenSauceSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens de Design ─── */
:root {
    /* Tipografia */
    --font-brand: 'Libre Baskerville', Georgia, serif;
    --font-heading: 'League Spartan', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: 'Open Sauce', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Light Mode */
    --bg-primary:     #F5F5F7;
    --bg-surface:     #FFFFFF;
    --bg-surface-2:   #EFEFEF;
    --text-primary:   #1A1A2E;
    --text-secondary: #5A5A72;
    --text-muted:     #9898B0;
    --border:         #E0E0EA;

    /* Accent — azul elegante (espiritualidade e criatividade) */
    --accent:         #5B7CF6;
    --accent-hover:   #4A6BF5;
    --accent-subtle:  rgba(91, 124, 246, 0.10);
    --accent-glow:    rgba(91, 124, 246, 0.25);

    /* Gradiente hero — semi-transparente para a imagem de fundo aparecer */
    --hero-gradient:  linear-gradient(160deg,
        rgba(240, 242, 255, 0.78) 0%,
        rgba(245, 245, 247, 0.65) 50%,
        rgba(238, 240, 255, 0.78) 100%);

    /* Sombras */
    --shadow-sm:  0 1px 4px rgba(26, 26, 46, 0.06);
    --shadow-md:  0 4px 20px rgba(26, 26, 46, 0.08);
    --shadow-lg:  0 12px 40px rgba(26, 26, 46, 0.12);
    --shadow-accent: 0 8px 30px rgba(91, 124, 246, 0.20);

    /* Radii */
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-pill: 980px;

    /* Transições */
    --transition: all 0.3s ease;

    /* Compra Segura */
    --secure-border-color: #20c36a;
    --secure-accent: #20c36a;
    --secure-card-bg: #ffffff;

    /* ── Guia de Sobrevivência – paleta do livro ── */
    --guia-azul:     #002776;
    --guia-verde:    #009c3b;
    --guia-creme:    #f8f2df;
    --guia-amarelo:  #fedf00;
    --guia-branco:   #ffffff;

    --guia-bg:           var(--guia-creme);
    --guia-bg-alt:       var(--guia-azul);
    --guia-text-primary: var(--guia-azul);
    --guia-text-light:   var(--guia-branco);
    --guia-accent:       var(--guia-verde);
    --guia-highlight:    var(--guia-amarelo);
    --guia-border:       rgba(0, 39, 118, 0.15);
}

[data-theme="dark"] {
    --bg-primary:     #0D0D12;
    --bg-surface:     #16161E;
    --bg-surface-2:   #1E1E2A;
    --text-primary:   #E8E8F0;
    --text-secondary: #A0A0B8;
    --text-muted:     #60607A;
    --border:         #2A2A3A;

    --accent:         #7C9EF8;
    --accent-hover:   #90AEFA;
    --accent-subtle:  rgba(124, 158, 248, 0.12);
    --accent-glow:    rgba(124, 158, 248, 0.20);

    /* Gradiente hero escuro — semi-transparente para imagem aparecer */
    --hero-gradient:  linear-gradient(160deg,
        rgba(13, 13, 18, 0.80) 0%,
        rgba(16, 16, 26, 0.70) 50%,
        rgba(15, 16, 30, 0.80) 100%);

    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.25);
    --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-accent: 0 8px 30px rgba(124, 158, 248, 0.15);

    /* Compra Segura */
    --secure-card-bg: #05060a;

    /* ── Guia de Sobrevivência – dark mode ── */
    --guia-bg:           #0a0f1a;
    --guia-bg-alt:       #001a54;
    --guia-text-primary: #f8f2df;
    --guia-text-light:   #ffffff;
    --guia-accent:       #00c44a;
    --guia-highlight:    #fedf00;
    --guia-border:       rgba(248, 242, 223, 0.1);
}

/* ─── Reset ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* ─── Tipografia ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
}

h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--text-secondary);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover { color: var(--accent-hover); }

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

/* ─── Logo (Fonte de Brand) ─── */
.logo {
    font-family: var(--font-brand);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.141em;
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.logo:hover {
    color: var(--text-primary);
    opacity: 0.75;
}