/* ============================================================================ * CONTRATO 06 — CSS Tokens canônicos * Reconstrução MemoriPlan — Abril 2026 * * Este arquivo mora em css/components/_tokens.css e é importado PRIMEIRO em * css/main.css. Componentes e páginas consomem SEMPRE via var(--token). * Hardcoded de hex é proibido em componentes novos. * * R15 (subagentes divergem em CSS): contrato lockfile — ninguém redefine * nem renomeia tokens sem PR explícito. * ========================================================================== */ :root { /* ─── Cores base (design system travado) ─────────────────────────────── */ --bg: #F7F5F0; /* fundo cream */ --bg-elev: #FFFFFF; /* cards brancos */ --bg-muted: #EFEBE3; /* área neutra mais escura que bg */ --accent: #E8384F; /* vermelho Memorize */ --accent-dark: #C42E42; /* accent hover/active */ --accent-fg: #FFFFFF; /* texto sobre accent */ /* ─── Tipografia (travada) ───────────────────────────────────────────── */ --font-title: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; /* mínimo em inputs — evita zoom iOS */ --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 36px; --fs-hero: 48px; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─── Texto (hierarquia) ─────────────────────────────────────────────── */ --text-primary: #1B1F24; /* título / texto principal */ --text-secondary: #4A5260; /* copy / labels */ --text-muted: #8A94A3; /* placeholder / meta */ --text-inverse: #FFFFFF; /* ─── Bordas ─────────────────────────────────────────────────────────── */ --border-subtle: rgba(27, 31, 36, 0.08); --border-default: rgba(27, 31, 36, 0.14); --border-strong: rgba(27, 31, 36, 0.24); /* ─── Sombras ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.05); --shadow-md: 0 4px 12px rgba(27, 31, 36, 0.08); --shadow-lg: 0 12px 32px rgba(27, 31, 36, 0.12); --shadow-modal: 0 24px 48px rgba(27, 31, 36, 0.20); /* ─── Radii ──────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ─── Espaçamento ────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Paleta de disciplinas (INVIOLÁVEL — CLAUDE.md) ─────────────────── */ --disc-red: #FF42A7; /* Redação */ --disc-mat: #FF9214; /* Matemática */ --disc-lng: #FF0000; /* Linguagens */ --disc-bio: #22C55E; /* Biologia */ --disc-fis: #EEE83F; /* Física */ --disc-qui: #14B1FF; /* Química */ --disc-his: #BA7C12; /* História */ --disc-geo: #A777EE; /* Geografia */ --disc-fil: #64748B; /* Filosofia */ --disc-soc: #94A3B8; /* Sociologia */ /* ─── Paleta de fases (INVIOLÁVEL — CLAUDE.md) ───────────────────────── */ --phase-bronze: #CD7F32; --phase-prata: #C0C0C0; --phase-ouro: #FFD700; --phase-diamante: #B9F2FF; /* ─── Estados semânticos ─────────────────────────────────────────────── */ --color-success: #22C55E; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #14B1FF; /* ─── Botões (consumidos por buttons.css) ────────────────────────────── */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-dark); --btn-primary-fg: var(--accent-fg); --btn-secondary-bg: transparent; --btn-secondary-fg: var(--accent); --btn-secondary-border: var(--accent); --btn-ghost-bg: transparent; --btn-ghost-fg: var(--text-primary); --btn-danger-bg: var(--color-danger); --btn-danger-fg: #FFFFFF; /* ─── Z-index (contrato 02 §R15/R17) ─────────────────────────────────── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-modal: 1000; --z-bottom-sheet: 1100; --z-context-tip: 1200; --z-toast: 1300; /* ─── Breakpoints (referência — não usáveis em @media) ───────────────── */ --bp-mobile: 640px; --bp-desktop: 1024px; /* ─── Transições ─────────────────────────────────────────────────────── */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 320ms ease; /* ─── Safe area (mobile) ─────────────────────────────────────────────── */ --safe-top: env(safe-area-inset-top); --safe-right: env(safe-area-inset-right); --safe-bottom: env(safe-area-inset-bottom); --safe-left: env(safe-area-inset-left); } /* ============================================================================ * Dark mode — overrides mínimos * Ativado por [data-theme="dark"] no ou * ========================================================================== */ [data-theme="dark"] { --bg: #0F1114; --bg-elev: #1A1D23; --bg-muted: #232830; --text-primary: #F3F5F7; --text-secondary: #BBC2CE; --text-muted: #7A8493; --text-inverse: #1B1F24; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.60); /* Disciplinas e fases: cores imutáveis — não invertem no dark. CSS de cards pode usar brightness()/opacity se precisar ajustar contraste. */ } /* ============================================================================ * Reset mínimo mobile-first * Não substitui o reset global atual — apenas amarras para componentes novos * ========================================================================== */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } *, *::before, *::after { box-sizing: inherit; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg); } h1, h2, h3, h4, h5 { font-family: var(--font-title); font-weight: var(--fw-semibold); line-height: var(--lh-tight); } /* ============================================================================ * Utilitários base (mobile-first) * ========================================================================== */ .u-touch-target { position: relative; } .u-touch-target::after { content: ''; position: absolute; inset: calc((44px - 100%) / -2); } .u-tap-feedback { -webkit-tap-highlight-color: transparent; transition: opacity var(--transition-fast), transform var(--transition-fast); } .u-tap-feedback:active { opacity: 0.7; transform: scale(0.97); } .u-safe-top { padding-top: max(0px, var(--safe-top)); } .u-safe-bottom { padding-bottom: max(0px, var(--safe-bottom)); } .u-full-dvh { min-height: 100vh; min-height: 100dvh; } .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ * Tokens CSS DEPRECATED (manter para compatibilidade — NÃO USAR em código novo) * Listados aqui para que se acharmos no código, saibamos que vieram da v1. * ============================================================================ * * --text-1, --text-2, --text-primary-old, --r-text, --r-surface, --r-bg * * Esses convivem durante a reconstrução. Subagentes de PR 13 (home redesign) * normalizam usando apenas os tokens definidos acima. * ========================================================================== */