/* base.css — temas (Dia|Noite × Homem|Mulher), reset, tipografia Aplicação: Tokens semânticos usados pelos componentes: --bg --surface --surface-2 --text --text-dim/--muted --border --primary --primary-2 --accent --on-accent --grad/--grad-main --on-grad --brand-dy (Dy da logo no header) --pos (texto positivo AA) --danger --focus-ring --hm-0..4 (heatmap) --shadow --shadow-sm */ :root { /* ── fixos (independem de paleta) ── */ --cat-saude: #0d9488; --cat-fitness: #f97316; --cat-mente: #8b5cf6; --cat-alimentacao: #d97706; --cat-habito: #65a30d; --cat-outros: #64748b; --radius: 16px; --radius-sm: 10px; --nav-h: 64px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ═══ HOMEM × DIA (padrão) ═══ */ :root, html[data-theme="homem"][data-mode="light"] { color-scheme: light; --bg: #f4f6fb; --surface: #ffffff; --surface-2: #e8edf7; --text: #0f172a; --text-dim: #475569; --muted: var(--text-dim); --border: #d8e0ee; --primary: #2563eb; --primary-2: #0ea5e9; --accent: #14b8a6; --on-accent: #04312c; --grad-main: linear-gradient(135deg, #2563eb, #14b8a6); --grad: var(--grad-main); --on-grad: #ffffff; --brand-dy: #bfdbfe; --pos: #1d4ed8; --danger: #dc2626; --focus-ring: #1d4ed8; --hm-0: var(--surface-2); --hm-1: #c3d7fa; --hm-2: #7fb0f5; --hm-3: #2563eb; --hm-4: #1e40af; --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 8px 24px rgba(15, 23, 42, .07); --shadow-sm: 0 1px 2px rgba(15, 23, 42, .08); } /* ═══ HOMEM × NOITE ═══ */ html[data-theme="homem"][data-mode="dark"] { color-scheme: dark; --bg: #0a0f1d; --surface: #131a2b; --surface-2: #1d2740; --text: #e2e8f0; --text-dim: #94a3b8; --muted: var(--text-dim); --border: #283454; --primary: #3b82f6; --primary-2: #06b6d4; --accent: #14b8a6; --on-accent: #04312c; --grad-main: linear-gradient(135deg, #1e3a8a, #0e7490); --grad: var(--grad-main); --on-grad: #e2e8f0; --brand-dy: #7dd3fc; --pos: #38bdf8; --danger: #f87171; --focus-ring: #38bdf8; --hm-0: var(--surface-2); --hm-1: #1e3a5f; --hm-2: #1d4ed8; --hm-3: #0ea5e9; --hm-4: #2dd4bf; --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); } /* ═══ MULHER × DIA ═══ */ html[data-theme="mulher"][data-mode="light"] { color-scheme: light; --bg: #fdf4ff; --surface: #ffffff; --surface-2: #f7e8fa; --text: #3b1d4d; --text-dim: #7c3a7c; --muted: var(--text-dim); --border: #eed5f2; --primary: #db2777; --primary-2: #a855f7; --accent: #f472b6; --on-accent: #4a0d2c; --grad-main: linear-gradient(135deg, #f472b6, #c084fc); --grad: var(--grad-main); --on-grad: #3b1d4d; --brand-dy: #831843; --pos: #be185d; --danger: #dc2626; --focus-ring: #be185d; --hm-0: var(--surface-2); --hm-1: #fbcfe8; --hm-2: #f9a8d4; --hm-3: #ec4899; --hm-4: #9333ea; --shadow: 0 1px 3px rgba(59, 29, 77, .09), 0 8px 24px rgba(59, 29, 77, .08); --shadow-sm: 0 1px 2px rgba(59, 29, 77, .09); } /* ═══ MULHER × NOITE ═══ */ html[data-theme="mulher"][data-mode="dark"] { color-scheme: dark; --bg: #1a0a1f; --surface: #26122e; --surface-2: #341a3f; --text: #fce7f3; --text-dim: #c084fc; --muted: var(--text-dim); --border: #452354; --primary: #ec4899; --primary-2: #a855f7; --accent: #f9a8d4; --on-accent: #4a0d2c; --grad-main: linear-gradient(135deg, #be185d, #7e22ce); --grad: var(--grad-main); --on-grad: #fce7f3; --brand-dy: #f9a8d4; --pos: #f0abfc; --danger: #fb7185; --focus-ring: #f0abfc; --hm-0: var(--surface-2); --hm-1: #4a1d42; --hm-2: #9d174d; --hm-3: #ec4899; --hm-4: #c084fc; --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); min-height: 100dvh; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, p, ul, fieldset, figure { margin: 0; padding: 0; } ul { list-style: none; } fieldset { border: 0; min-width: 0; } legend { padding: 0; } h1, h2, h3 { text-wrap: balance; line-height: 1.2; } img, svg { display: block; max-width: 100%; } button, input, select { font: inherit; color: inherit; } button, select, a, input[type="checkbox"], input[type="radio"], label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button { cursor: pointer; background: none; border: 0; } /* ── Foco visível ── */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* ── Skip link ── */ .skip-link { position: absolute; top: -100px; left: 12px; z-index: 100; padding: 10px 16px; background: var(--surface); color: var(--text); border-radius: var(--radius-sm); box-shadow: var(--shadow); text-decoration: none; font-weight: 600; } .skip-link:focus-visible { top: calc(var(--safe-top) + 8px); } /* ── Movimento reduzido ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }