/* =========================================================
   VESUV — DESIGN TOKENS v1.0
   Derivado do VESUVIA Design System. Prefixo --vsv-.
   Tema escuro é o nativo da marca. Tema claro respeita a
   regra: em fundo claro, texto magma usa Magma 700.
   ========================================================= */

:root {
  /* ---------- MAGMA ---------- */
  --vsv-magma-50:  #FFF4EC;
  --vsv-magma-100: #FFE2CE;
  --vsv-magma-200: #FFBE93;
  --vsv-magma-300: #FF9354;
  --vsv-magma-400: #FE7112;
  --vsv-magma-500: #FD5E02;
  --vsv-magma-600: #D94B02;
  --vsv-magma-700: #A83703;
  --vsv-magma-800: #7C2810;
  --vsv-magma-900: #4A1808;

  /* ---------- IGNIS / EMBER ---------- */
  --vsv-ignis-300: #FFD747;
  --vsv-ignis-400: #FFB020;
  --vsv-ignis-500: #F59005;
  --vsv-ember-500: #8F1F03;

  /* ---------- OBSIDIANA / BASALTO ---------- */
  --vsv-obsidian-500: #3D3D45;
  --vsv-obsidian-600: #2B2B31;
  --vsv-obsidian-700: #1F1F24;
  --vsv-obsidian-750: #1B1B20;
  --vsv-obsidian-800: #16161A;
  --vsv-obsidian-850: #101014;
  --vsv-obsidian-900: #0A0A0C;
  --vsv-obsidian-950: #050506;

  /* ---------- ASH ---------- */
  --vsv-ash-50:  #F5F3F1;
  --vsv-ash-100: #DDDBD9;
  --vsv-ash-200: #BBB9B8;
  --vsv-ash-300: #8A8A93;
  --vsv-ash-400: #5A5A63;

  --vsv-white: #FFFFFF;

  /* ---------- FEEDBACK ---------- */
  --vsv-success: #29C07A;
  --vsv-warning: #FFB020;
  --vsv-danger:  #E5484D;
  --vsv-info:    #4A9EFF;

  /* ---------- TIPOGRAFIA ---------- */
  --vsv-font-display: "Michroma", "Orbitron", "Eurostile", sans-serif;
  --vsv-font-sans: "Inter", "Inter Tight", system-ui, -apple-system, sans-serif;
  --vsv-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --vsv-text-2xs: 0.6875rem;
  --vsv-text-xs:  0.75rem;
  --vsv-text-sm:  0.875rem;
  --vsv-text-md:  1rem;
  --vsv-text-lg:  1.125rem;
  --vsv-text-xl:  1.25rem;
  --vsv-text-2xl: 1.5rem;
  --vsv-text-3xl: 2rem;
  --vsv-text-4xl: 2.5rem;
  --vsv-text-5xl: 3.5rem;
  --vsv-text-6xl: 4.5rem;

  --vsv-weight-regular: 400;
  --vsv-weight-medium: 500;
  --vsv-weight-semibold: 600;
  --vsv-weight-bold: 700;

  --vsv-leading-tight: 1.05;
  --vsv-leading-snug: 1.25;
  --vsv-leading-normal: 1.55;
  --vsv-leading-loose: 1.7;

  --vsv-tracking-eyebrow: 0.32em;
  --vsv-tracking-display: 0.10em;
  --vsv-tracking-wide: 0.04em;

  /* ---------- ESPAÇO ---------- */
  --vsv-space-1: 0.25rem;
  --vsv-space-2: 0.5rem;
  --vsv-space-3: 0.75rem;
  --vsv-space-4: 1rem;
  --vsv-space-5: 1.25rem;
  --vsv-space-6: 1.5rem;
  --vsv-space-8: 2rem;
  --vsv-space-10: 2.5rem;
  --vsv-space-12: 3rem;
  --vsv-space-16: 4rem;
  --vsv-space-20: 5rem;
  --vsv-space-24: 6rem;
  --vsv-space-32: 8rem;

  /* ---------- RAIO ---------- */
  --vsv-radius-none: 0;
  --vsv-radius-xs: 2px;
  --vsv-radius-sm: 4px;
  --vsv-radius-md: 8px;
  --vsv-radius-lg: 12px;
  --vsv-radius-xl: 16px;
  --vsv-radius-full: 999px;
  --vsv-radius-cut: 14px;

  /* ---------- SOMBRA ---------- */
  --vsv-shadow-1: 0 1px 2px rgba(0,0,0,.6);
  --vsv-shadow-2: 0 4px 12px rgba(0,0,0,.55);
  --vsv-shadow-3: 0 12px 32px rgba(0,0,0,.6);
  --vsv-shadow-4: 0 24px 64px rgba(0,0,0,.7);
  --vsv-glow-sm: 0 0 12px rgba(253,94,2,.35);
  --vsv-glow-md: 0 0 28px rgba(253,94,2,.42);
  --vsv-glow-lg: 0 0 56px rgba(253,94,2,.38);

  /* ---------- GRADIENTES ---------- */
  --vsv-grad-magma: linear-gradient(180deg,#FFD747 0%,#FFB020 22%,#FD5E02 58%,#8F1F03 100%);
  --vsv-grad-magma-h: linear-gradient(90deg,#FD5E02 0%,#FFB020 100%);
  --vsv-grad-obsidian: linear-gradient(160deg,#16161A 0%,#0A0A0C 62%,#050506 100%);
  --vsv-grad-fissure: linear-gradient(90deg,transparent 0%,#FD5E02 50%,transparent 100%);
  --vsv-grad-ember: radial-gradient(60% 60% at 50% 42%,rgba(253,94,2,.28) 0%,rgba(253,94,2,0) 70%);
  --vsv-grad-steel: linear-gradient(135deg,#3A3A42 0%,#1A1A1F 55%,#0E0E12 100%);

  /* ---------- MOVIMENTO ---------- */
  --vsv-dur-instant: 90ms;
  --vsv-dur-fast: 160ms;
  --vsv-dur-base: 260ms;
  --vsv-dur-slow: 460ms;
  --vsv-ease-out: cubic-bezier(.2,.8,.2,1);
  --vsv-ease-inout: cubic-bezier(.65,0,.35,1);
  --vsv-ease-magma: cubic-bezier(.16,1,.3,1);

  /* ---------- Z ---------- */
  --vsv-z-base: 1;
  --vsv-z-seam: 60;
  --vsv-z-dropdown: 100;
  --vsv-z-sticky: 200;
  --vsv-z-overlay: 300;
  --vsv-z-modal: 400;
  --vsv-z-toast: 500;

  /* ---------- LAYOUT ---------- */
  --vsv-max: 1180px;
  --vsv-gutter: clamp(1.25rem, 5vw, 3rem);
  --vsv-nav-h: 68px;
}

/* =========================================================
   TEMA ESCURO — nativo da marca
   ========================================================= */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --vsv-bg: var(--vsv-obsidian-950);
  --vsv-bg-elevated: var(--vsv-obsidian-900);
  --vsv-surface: var(--vsv-obsidian-850);
  --vsv-surface-2: var(--vsv-obsidian-800);
  --vsv-border: var(--vsv-obsidian-700);
  --vsv-border-strong: var(--vsv-obsidian-600);

  --vsv-text: var(--vsv-white);
  --vsv-text-2: var(--vsv-ash-200);
  --vsv-text-3: var(--vsv-ash-300);

  --vsv-accent: var(--vsv-magma-500);
  --vsv-accent-hover: var(--vsv-magma-400);
  --vsv-accent-press: var(--vsv-magma-600);
  --vsv-accent-fg: var(--vsv-obsidian-950);
  --vsv-accent-soft: rgba(253,94,2,.12);

  --vsv-focus-ring: var(--vsv-magma-400);

  /* vidro sobre rocha escura */
  --vsv-glass-bg: rgba(22,22,26,.55);
  --vsv-glass-bg-strong: rgba(10,10,12,.78);
  --vsv-glass-border: rgba(255,255,255,.07);
  --vsv-glass-highlight: rgba(255,255,255,.055);
  --vsv-glass-blur: 18px;

  --vsv-rock-opacity: .22;
  --vsv-ember-opacity: 1;
  --vsv-seam-track: rgba(255,255,255,.06);
}

/* =========================================================
   TEMA CLARO — "basalto exposto": cinza mineral, nunca branco puro
   Regra de marca: texto magma em fundo claro usa Magma 700.
   ========================================================= */
[data-theme="light"] {
  color-scheme: light;

  --vsv-bg: #EDEAE6;
  --vsv-bg-elevated: #F4F2EF;
  --vsv-surface: #F7F5F2;
  --vsv-surface-2: #E4E0DB;
  --vsv-border: rgba(10,10,12,.12);
  --vsv-border-strong: rgba(10,10,12,.22);

  --vsv-text: #14141A;
  --vsv-text-2: #4A4A53;
  --vsv-text-3: #6F6F79;

  --vsv-accent: var(--vsv-magma-700);
  --vsv-accent-hover: var(--vsv-magma-600);
  --vsv-accent-press: var(--vsv-magma-800);
  --vsv-accent-fg: #FFFFFF;
  --vsv-accent-soft: rgba(168,55,3,.10);

  --vsv-focus-ring: var(--vsv-magma-700);

  --vsv-glass-bg: rgba(255,255,255,.55);
  --vsv-glass-bg-strong: rgba(247,245,242,.85);
  --vsv-glass-border: rgba(10,10,12,.10);
  --vsv-glass-highlight: rgba(255,255,255,.65);
  --vsv-glass-blur: 16px;

  --vsv-grad-obsidian: linear-gradient(160deg,#F7F5F2 0%,#EDEAE6 62%,#E4E0DB 100%);
  --vsv-grad-ember: radial-gradient(60% 60% at 50% 42%,rgba(168,55,3,.12) 0%,rgba(168,55,3,0) 70%);
  --vsv-grad-fissure: linear-gradient(90deg,transparent 0%,#A83703 50%,transparent 100%);

  --vsv-shadow-1: 0 1px 2px rgba(20,20,26,.08);
  --vsv-shadow-2: 0 4px 12px rgba(20,20,26,.10);
  --vsv-shadow-3: 0 12px 32px rgba(20,20,26,.12);
  --vsv-shadow-4: 0 24px 64px rgba(20,20,26,.14);
  --vsv-glow-sm: 0 0 10px rgba(168,55,3,.18);
  --vsv-glow-md: 0 0 24px rgba(168,55,3,.20);
  --vsv-glow-lg: 0 0 48px rgba(168,55,3,.18);

  --vsv-rock-opacity: .10;
  --vsv-ember-opacity: .7;
  --vsv-seam-track: rgba(10,10,12,.08);
}

/* =========================================================
   v2 — GEOMETRIA MODERNA
   O guia de marca pedia raio curto. A direção do cliente pediu
   controles arredondados. Estes tokens sobrescrevem os raios
   de componente sem tocar no resto do sistema.
   ========================================================= */
:root {
  --vsv-radius-control: 999px;   /* botões, tags, segmented */
  --vsv-radius-card: 20px;       /* cards e painéis */
  --vsv-radius-panel: 26px;      /* nav, cookies, CTA */
  --vsv-radius-cut: 30px;        /* corte de canto */

  /* profundidade da cena: 0 = superfície, 1 = câmara magmática */
  --depth: 0;
}

/* =========================================================
   v3 — MÁSCARAS DA CENA GEOLÓGICA
   SVG inline como variável: a cor vem do tema, a forma fica aqui.
   ========================================================= */
:root {
  --ridge-far: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,400V228L96,196L188,244L276,168L372,232L474,160L566,226L664,178L768,240L864,186L964,236L1066,172L1164,230L1268,182L1360,238L1440,200V400Z'%20fill='%23000'/%3E%3C/svg%3E");
  --ridge-mid: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,400V286L108,250L214,304L322,228L438,292L548,222L664,290L778,236L892,298L1004,240L1120,296L1236,244L1348,300L1440,262V400Z'%20fill='%23000'/%3E%3C/svg%3E");
  --ridge-near: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20400'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,400V336L152,300L288,348L440,292L586,342L730,298L878,346L1022,300L1170,344L1310,304L1440,340V400Z'%20fill='%23000'/%3E%3C/svg%3E");
  --vein-a: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20170'%20preserveAspectRatio='none'%3E%3Cpath%20d='M-20,102L140,66L248,110L392,52L506,98L618,44L742,96L868,40L1002,94L1136,50L1268,100L1460,60'%20stroke='%23000'%20stroke-width='3'%20fill='none'/%3E%3Cpath%20d='M392,52L430,12M742,96L790,132M1002,94L1044,134'%20stroke='%23000'%20stroke-width='2'%20fill='none'/%3E%3C/svg%3E");
  --vein-b: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20170'%20preserveAspectRatio='none'%3E%3Cpath%20d='M-20,52L160,112L340,56L508,116L680,60L852,118L1032,58L1210,114L1460,62'%20stroke='%23000'%20stroke-width='2'%20fill='none'/%3E%3Cpath%20d='M340,56L306,16M852,118L890,156'%20stroke='%23000'%20stroke-width='1.5'%20fill='none'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23n)'%20opacity='.6'/%3E%3C/svg%3E");
}

/* =========================================================
   v3 — VIDRO SEM BACKDROP-FILTER
   O blur de fundo foi removido de tudo que rola junto com a
   página: era a causa principal do travamento. Só a navbar,
   o painel do menu e o banner de cookies mantêm o filtro,
   porque são fixos e pequenos. O resto compensa com opacidade.
   ========================================================= */
:root,
[data-theme="dark"] {
  --vsv-glass-bg: rgba(14,14,19,.76);
  --vsv-glass-bg-strong: rgba(8,8,11,.90);
  --vsv-glass-border: rgba(255,255,255,.09);
  --vsv-glass-highlight: rgba(255,255,255,.05);
}
[data-theme="light"] {
  --vsv-glass-bg: rgba(252,251,249,.84);
  --vsv-glass-bg-strong: rgba(252,251,249,.94);
  --vsv-glass-border: rgba(10,10,12,.12);
  --vsv-glass-highlight: rgba(255,255,255,.7);
}