/* ===================================================================== * tokens.css — Design System Semântico (estilo Material 3) * --------------------------------------------------------------------- * Fonte única de tokens. Carregado ANTES de style.css no . * * Objetivo offline-first: * - Define paleta tonal (primary/secondary/tertiary/error/neutral 0–100) * - Mapeia tokens semânticos (--sys-color-*) por tema (dark/light/auto) * - Define font stack SYSTEM-UI (zero CDN — ver Fase 3) * - Espaçamento, raio, elevação e motion reutilizáveis * - REDECLARA os tokens flat legados (--primary, --bg-main…) para que * style.css continue funcionando sem rewrite. * ===================================================================== */ :root { /* ---------- Fontes (SYSTEM STACK — zero requests externos) ---------- */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------- Paleta tonal: PRIMARY (hue 217, base #3b82f6) ---------- */ --primary-0: #f5f8ff; --primary-10: #e7efff; --primary-20: #d2e1ff; --primary-30: #b3cdff; --primary-40: #8fb0ff; --primary-50: #6b93fb; --primary-60: #4f7af4; --primary-70: #3b82f6; /* base */ --primary-80: #2563eb; --primary-90: #1d4ed8; --primary-95: #1e40af; --primary-99: #172554; --primary-100: #0b1220; /* ---------- Paleta tonal: SECONDARY (hue 258, base #8b5cf6) -------- */ --secondary-0: #faf7ff; --secondary-10: #f2ecff; --secondary-20: #e9ddff; --secondary-30: #d9c3ff; --secondary-40: #c3a4fa; --secondary-50: #ac87f4; --secondary-60: #9a6ef0; --secondary-70: #8b5cf6; /* base */ --secondary-80: #7c3aed; --secondary-90: #6d28d9; --secondary-95: #581c87; --secondary-99: #3b0764; --secondary-100: #1e0a33; /* ---------- Paleta tonal: TERTIARY (hue 189, base #06b6d4) -------- */ --tertiary-0: #f0fdfe; --tertiary-10: #e2fbff; --tertiary-20: #c6f5fd; --tertiary-30: #93ecf6; --tertiary-40: #4fdcec; --tertiary-50: #22c3dd; --tertiary-60: #09a8c6; --tertiary-70: #06b6d4; /* base */ --tertiary-80: #0e8aa3; --tertiary-90: #11697c; --tertiary-95: #134e5a; --tertiary-99: #08313a; --tertiary-100: #04222a; /* ---------- Paleta tonal: ERROR (hue 0, base #ef4444) ------------- */ --error-0: #fff3f2; --error-10: #ffe2de; --error-20: #ffc9c2; --error-30: #ffada3; --error-40: #ff897d; --error-50: #f7635a; --error-60: #ec443b; --error-70: #ef4444; /* base */ --error-80: #dc2626; --error-90: #b91c1c; --error-95: #991b1b; --error-99: #450a0a; --error-100: #2a0606; /* ---------- Paleta tonal: WARNING/NEUTRAL (hue 38 / slate) -------- */ --warning: #f59e0b; --warning-soft: #fbbf24; /* ---------- Tokens de espaçamento (escala 4px) -------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ /* ---------- Raio (bordas) ----------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.45rem; --radius-md: 0.6rem; --radius-lg: 0.9rem; --radius-xl: 1.25rem; --radius-pill: 999px; /* ---------- Elevação (sombras) ------------------------------------ */ --elevation-1: 0 1px 2px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12); --elevation-2: 0 2px 6px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.16); --elevation-3: 0 6px 16px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.18); /* ---------- Motion ------------------------------------------------- */ --dur-fast: 120ms; --dur-normal: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* ---------- Tokens legados (mantidos p/ compatibilidade) ---------- */ --primary: var(--primary-70); --primary-hover: var(--primary-80); --primary-foreground: #ffffff; --secondary: var(--secondary-70); --warning: var(--warning-soft); } /* ===================================================================== * Tokens SEMÂNTICOS por tema (--sys-color-*) * Herdam da paleta tonal acima — nada de valores literais repetidos. * ===================================================================== */ /* ---------- DARK (padrão do app) ----------------------------------- */ :root, .dark-theme, .auto-theme { color-scheme: dark; --sys-color-primary: var(--primary-70); --sys-color-on-primary: #ffffff; --sys-color-primary-container: var(--primary-95); --sys-color-on-primary-container: var(--primary-30); --sys-color-secondary: var(--secondary-70); --sys-color-on-secondary: #ffffff; --sys-color-secondary-container: var(--secondary-95); --sys-color-on-secondary-container: var(--secondary-30); --sys-color-tertiary: var(--tertiary-70); --sys-color-on-tertiary: #04222a; --sys-color-tertiary-container: var(--tertiary-95); --sys-color-on-tertiary-container: var(--tertiary-30); --sys-color-error: var(--error-60); --sys-color-on-error: #ffffff; --sys-color-error-container: var(--error-95); --sys-color-on-error-container: var(--error-30); --sys-color-surface: #020617; /* == --bg-main */ --sys-color-on-surface: #f8fafc; /* == --text-main */ --sys-color-surface-variant: #1e293b; /* == --bg-card */ --sys-color-on-surface-variant: #94a3b8; /* == --text-muted */ --sys-color-surface-container: #1e293b; --sys-color-surface-container-high: #273449; --sys-color-surface-container-highest: #334155; --sys-color-outline: rgba(255,255,255,0.12); --sys-color-outline-variant: rgba(255,255,255,0.08); --sys-color-backdrop: rgba(2,6,23,0.6); --sys-color-scrim: rgba(0,0,0,0.5); /* aliases legados → semânticos (style.css continua funcionando) */ --bg-main: var(--sys-color-surface); --bg-sidebar: var(--sys-color-surface-variant); --bg-card: var(--sys-color-surface-container); --bg-panel: var(--sys-color-surface-container); --bg-primary: var(--sys-color-surface-variant); --bg-secondary: var(--sys-color-surface-container); --text-main: var(--sys-color-on-surface); --text-muted: var(--sys-color-on-surface-variant); --text-primary: var(--sys-color-on-surface); --border-main: var(--sys-color-outline); --glass-bg: rgba(30,41,59,0.7); --glass-border: var(--sys-color-outline); --input-bg: rgba(255,255,255,0.05); --bg-subtle: rgba(255,255,255,0.05); --input-focus-shadow: rgba(59,130,246,0.2); --primary-rgb: 59,130,246; --primary-hover-rgb: 37,99,235; --grad-secondary: var(--secondary-70); } /* ---------- LIGHT --------------------------------------------------- */ .light-theme { color-scheme: light; --sys-color-primary: var(--primary-80); --sys-color-on-primary: #ffffff; --sys-color-primary-container: var(--primary-10); --sys-color-on-primary-container: var(--primary-90); --sys-color-secondary: var(--secondary-80); --sys-color-on-secondary: #ffffff; --sys-color-secondary-container: var(--secondary-10); --sys-color-on-secondary-container: var(--secondary-90); --sys-color-tertiary: var(--tertiary-80); --sys-color-on-tertiary: #ffffff; --sys-color-tertiary-container: var(--tertiary-10); --sys-color-on-tertiary-container: var(--tertiary-90); --sys-color-error: var(--error-70); --sys-color-on-error: #ffffff; --sys-color-error-container: var(--error-10); --sys-color-on-error-container: var(--error-90); --sys-color-surface: #f8fafc; --sys-color-on-surface: #0f172a; --sys-color-surface-variant: #ffffff; --sys-color-on-surface-variant: #64748b; --sys-color-surface-container: #ffffff; --sys-color-surface-container-high: #f1f5f9; --sys-color-surface-container-highest: #e2e8f0; --sys-color-outline: rgba(0,0,0,0.12); --sys-color-outline-variant: rgba(0,0,0,0.08); --sys-color-backdrop: rgba(248,250,252,0.6); --sys-color-scrim: rgba(15,23,42,0.4); /* aliases legados → semânticos */ --bg-main: var(--sys-color-surface); --bg-sidebar: var(--sys-color-surface-variant); --bg-card: var(--sys-color-surface-container); --bg-panel: var(--sys-color-surface-container); --bg-primary: var(--sys-color-surface-variant); --bg-secondary: var(--sys-color-surface-container); --text-main: var(--sys-color-on-surface); --text-muted: var(--sys-color-on-surface-variant); --text-primary: var(--sys-color-on-surface); --border-main: var(--sys-color-outline); --glass-bg: rgba(255,255,255,0.7); --glass-border: var(--sys-color-outline); --input-bg: rgba(0,0,0,0.05); --bg-subtle: rgba(0,0,0,0.03); --input-focus-shadow: rgba(37,99,235,0.15); --primary-rgb: 37,99,235; --primary-hover-rgb: 29,78,216; --grad-secondary: var(--secondary-80); }