/* =========================================================
   Mirelle Reis — Presença Digital · Design System · tokens.css
   Fase 1. Fonte única da verdade pra cor, tipografia, espaço,
   raio, sombra e easing. Componentes ficam em main.css.
   ========================================================= */

/* ---------- fontes (self-hosted) ---------- */
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Plex";src:url("../fonts/plexsans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"PlexMono";src:url("../fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"PlexMono";src:url("../fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"PlexMono";src:url("../fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* ---------- cor: neutros ---------- */
  --graphite-950:#0E1013;
  --graphite-900:#14171B;
  --graphite-800:#1C2024;
  --graphite-700:#2A2F35;
  --gray-500:#6B7280;
  --gray-300:#C6CBD1;
  --gray-200:#E7E9EB;
  --gray-100:#F4F5F6;
  --white:#FFFFFF;

  /* ---------- cor: acento ---------- */
  /* green-600 é o valor usado como fundo sólido de botão com texto branco —
     mantido em #0D7454 (não o verde mais claro original) porque só esse
     tom cruza 4.5:1 de contraste com branco (WCAG AA). green-500 mais claro
     fica reservado pra texto sobre fundo escuro, onde o contraste é o oposto. */
  --green-700:#0A5D42;
  --green-600:#0D7454;
  --green-500:#1AAE7E;
  --green-100:#E4F5EE;
  --blue-700:#243FA8;
  --blue-600:#3457D5;
  --blue-100:#E8EDFC;
  --whatsapp:#25D366;
  --whatsapp-deep:#1DA851;

  /* ---------- papel do token (tema claro, padrão) ---------- */
  --bg:var(--white);
  --surface:var(--white);
  --surface-sunken:var(--gray-100);
  --ink:var(--graphite-950);
  --ink-soft:var(--gray-500);
  --line:var(--gray-200);
  --dark:var(--graphite-950);
  --dark-surface:var(--graphite-800);
  --dark-line: rgba(244,245,246,.12);
  --on-dark:var(--white);
  --on-dark-soft: rgba(244,245,246,.68);
  --accent:var(--green-600);
  --accent-deep:var(--green-700);
  --accent-soft:var(--green-100);
  --accent-2:var(--blue-600);

  /* ---------- tipografia ---------- */
  --font-display:"Bricolage","Segoe UI",system-ui,sans-serif;
  --font-body:"Plex","Segoe UI",Arial,sans-serif;
  --font-mono:"PlexMono","Consolas",monospace;

  /* escala tipográfica (base 16px, ratio ~1.25) */
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:2.75rem; --text-4xl:3.5rem;

  /* ---------- espaçamento (escala 8px) ---------- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-24:6rem; --space-32:8rem;

  /* ---------- forma ---------- */
  --radius-sm:8px; --radius-md:14px; --radius-lg:24px; --radius-full:999px;

  /* ---------- elevação ---------- */
  --shadow-sm: 0 2px 8px -2px rgba(14,16,19,.08);
  --shadow-md: 0 12px 32px -12px rgba(14,16,19,.14);
  --shadow-elevated: 0 24px 60px -24px rgba(14,16,19,.20);
  --shadow-dark: 0 24px 60px -22px rgba(0,0,0,.55);

  /* ---------- movimento ---------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --duration-fast:.15s; --duration-base:.25s; --duration-slow:.5s;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:var(--graphite-950); --surface:var(--graphite-900); --surface-sunken:var(--graphite-800);
    --ink:var(--gray-100); --ink-soft:var(--gray-300); --line: rgba(244,245,246,.12);
  }
}
:root[data-theme="dark"]{
  --bg:var(--graphite-950); --surface:var(--graphite-900); --surface-sunken:var(--graphite-800);
  --ink:var(--gray-100); --ink-soft:var(--gray-300); --line: rgba(244,245,246,.12);
}
:root[data-theme="light"]{
  --bg:var(--white); --surface:var(--white); --surface-sunken:var(--gray-100);
  --ink:var(--graphite-950); --ink-soft:var(--gray-500); --line:var(--gray-200);
}