/* ========================================================================== tokens.css — Design system "estudio-pro" Fonte da verdade das cores, fontes e espaçamentos do site inteiro. Nenhum valor hex deve aparecer solto em outro arquivo CSS. ========================================================================== */ :root { /* ---- Paleta (rosa empoeirado + mocha) ---- */ --bg: #FAF6F1; /* Paper — fundo base */ --bg-alt: #F3EDE7; /* faixa alternada, blocos destacados */ --surface: #FFFFFF; /* cards */ --text: #4A342E; /* Mocha Ink */ --text-secondary:#8C837D; /* Warm Grey */ --clay: #7A5A4E; /* Clay Brown — labels, bordas fortes */ --accent: #C97B85; /* Dusty Rose — cor de ação */ --accent-hover: #B56A74; --blush: #EAC6CB; /* realce suave */ --border: #E4DDD7; --tag-bg: #F5EFEA; /* Semânticos */ --success: #6DAE72; --shadow-sm: 0 1px 2px rgba(74, 52, 46, .06); --shadow-md: 0 8px 24px rgba(74, 52, 46, .08); --shadow-lg: 0 18px 48px rgba(74, 52, 46, .12); /* ---- Tipografia ---- */ --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- Layout ---- */ --measure: 740px; /* largura de leitura — portfólio */ --measure-wide: 1080px; /* largura larga — páginas de venda */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* Espaçamento — escala de 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; } /* ---- Dark mode: segue o sistema por padrão ---- */ @media (prefers-color-scheme: dark) { :root { --bg: #2A1F1C; --bg-alt: #362924; --surface: #362924; --text: #FAF6F1; --text-secondary:#B8AEA8; --clay: #C4A89E; --accent: #C97B85; --accent-hover: #D99AA3; --blush: #4A2E33; --border: #4A3D38; --tag-bg: #3D2F2A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .45); } } /* ---- Override manual (data-theme no ) ---- */ :root[data-theme="light"] { --bg: #FAF6F1; --bg-alt: #F3EDE7; --surface: #FFFFFF; --text: #4A342E; --text-secondary: #8C837D; --clay: #7A5A4E; --accent: #C97B85; --accent-hover: #B56A74; --blush: #EAC6CB; --border: #E4DDD7; --tag-bg: #F5EFEA; } :root[data-theme="dark"] { --bg: #2A1F1C; --bg-alt: #362924; --surface: #362924; --text: #FAF6F1; --text-secondary: #B8AEA8; --clay: #C4A89E; --accent: #C97B85; --accent-hover: #D99AA3; --blush: #4A2E33; --border: #4A3D38; --tag-bg: #3D2F2A; }