/* ============================================================ MedQuest · TOKENS — tokens.css (Etapa 3) ------------------------------------------------------------ FONTE ÚNICA de design tokens (cores, tipografia, espaçamento, raios, sombras, breakpoints). Carregado por último no , portanto é a fonte VENCEDORA: consolida os :root duplicados de style.css e redesign.css sem removê-los (rollback = tirar o deste arquivo do index.html). Os valores efetivos aqui reproduzem os da camada redesign.css (que já vencia por ordem de carregamento) e ACRESCENTAM os tokens que faltavam (escala de espaçamento, tipografia e breakpoints) para padronizar os componentes. Regra de tema: claro é o padrão em :root; escuro em [data-theme="dark"] no . Nenhum token depende só de cor (ver .is-* / ícones nos componentes). ============================================================ */ :root { /* ---- Superfícies / linhas ---- */ --bg: #f4f6fb; --bg-soft: #eaeef6; --surface: #ffffff; --surface-2: #f7f9fc; --card: var(--surface); /* alias histórico usado no app */ --border: #e6eaf2; --line: var(--border); /* alias histórico */ --border-strong: #d5dbe8; /* ---- Texto ---- */ --text: #12203c; --text-2: #5a6b86; --muted: #647391; /* escurecido p/ WCAG AA: 4.77:1 sobre superfície (antes #93a1b8 = 2.61 reprovava) */ /* ---- Marca ---- */ --brand: #3b5bfd; --brand-600: #2f49e6; --brand-700: #2438c2; --brand-soft: #eef1ff; --violet: #7c4dff; --violet-soft: #f2edff; --grad: linear-gradient(115deg, #3b5bfd 0%, #6a4bf5 55%, #8b5cf6 100%); --grad-soft: linear-gradient(115deg, #eef1ff 0%, #f2edff 100%); /* ---- Estados semânticos (nunca só cor: pareados com ícone/texto) ---- */ /* base = usado em preenchimentos/bordas/ícones; *-ink = variante para TEXTO sobre superfície clara, com contraste WCAG AA (>=4.5:1). */ --correct: #12a150; --correct-ink: #0a7d3c; /* texto: 4.90:1 sobre branco */ --correct-soft: #e7f8ee; --wrong: #e04352; --wrong-ink: #c2303f; /* texto: 5.06:1 sobre branco */ --wrong-soft: #fdecee; --warn: #a85f00; /* escurecido p/ AA em texto: 4.88:1 (antes #d98307 = 2.92) */ --warn-strong: #a85f00; --warn-soft: #fef3e0; --info: #2f6feb; --info-soft: #e8f0fe; /* aliases usados por alguns componentes antigos */ --ec: var(--wrong); /* ---- Sombras ---- */ --shadow-sm: 0 1px 2px rgba(20,34,62,.05), 0 1px 3px rgba(20,34,62,.05); --shadow-md: 0 6px 20px rgba(20,34,62,.08); --shadow-lg: 0 18px 46px rgba(20,34,62,.14); --shadow-brand: 0 10px 26px rgba(59,91,253,.28); /* ---- Raios ---- */ --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --radius-pill: 999px; /* ---- Espaçamento (escala 4px) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- Tipografia ---- */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --lh-tight: 1.25; --lh-normal: 1.55; --fw-normal: 500; --fw-medium: 600; --fw-bold: 700; /* ---- Layout / breakpoints (usados em JS via getComputedStyle quando útil) ---- */ --sidebar-w: 264px; --content-maxw: 1120px; --topbar-h: 64px; --bp-mobile: 640px; --bp-tablet: 960px; --bp-desktop: 1200px; /* ---- Foco visível (acessibilidade WCAG 2.2) ---- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent); --focus-outline: 2px solid var(--brand); } [data-theme="dark"] { --bg: #0b0f18; --bg-soft: #131926; --surface: #131926; --surface-2: #1a2130; --border: #232c3d; --border-strong: #313c50; --text: #eef2f9; --text-2: #a7b4c8; --muted: #8494ab; /* levemente mais claro que o original (#6f7d92) p/ contraste AA em texto secundário */ --brand: #6f89f2; /* clareado p/ contraste em superfícies escuras */ --brand-600: #5f79ea; --brand-700: #4f68d8; --brand-soft: #18213a; --violet: #a186f5; --violet-soft: #201a38; --grad: linear-gradient(115deg, #2b3a86 0%, #45397e 55%, #5a4a86 100%); --grad-soft: linear-gradient(115deg, #18213a 0%, #201a38 100%); --correct: #34d27b; --correct-ink: #34d27b; /* no escuro a cor viva já tem contraste alto (8.9:1) */ --correct-soft: #0f2a1c; --wrong: #f87171; --wrong-ink: #f87171; /* 6.35:1 sobre superfície escura */ --wrong-soft: #2c1518; --warn: #f5b54b; --warn-strong: #f5b54b; --warn-soft: #2c2210; --info: #78a4ff; --info-soft: #16223d; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.5); --shadow-lg: 0 18px 46px rgba(0,0,0,.6); --shadow-brand: 0 8px 22px rgba(0,0,0,.45); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); } /* Respeita a preferência do sistema por menos movimento (WCAG 2.3.3). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }