/* =========================================================================== tokens.css — Design tokens do Vargas.Cursos Portado do design "Curso Template — Redesign" (_design/template.html). Editorial + moderno. Suporta tema claro/escuro e variações de acento via atributos no : data-theme="light|dark" data-accent="blue|teal|plum|amber" =========================================================================== */ :root, [data-theme="light"] { /* superfícies — matiz fria (azul-claro), no estilo do template original */ --bg: oklch(0.975 0.008 256); --bg-elev: oklch(0.99 0.005 256); --surface: #ffffff; --surface-2: oklch(0.962 0.009 256); --sidebar-bg: oklch(0.957 0.011 256); --hover: oklch(0.93 0.014 256); --code-bg: oklch(0.955 0.012 256); /* texto */ --text: oklch(0.18 0.015 256); --text-soft: oklch(0.32 0.012 256); --muted: oklch(0.5 0.01 256); --muted-2: oklch(0.62 0.01 256); /* bordas */ --border: oklch(0.91 0.008 256); --border-strong: oklch(0.85 0.012 256); /* feedback */ --success: oklch(0.62 0.14 145); --success-bg: oklch(0.95 0.04 145); --error: oklch(0.6 0.18 25); --error-bg: oklch(0.96 0.04 25); --warning: oklch(0.74 0.15 70); --warning-bg: oklch(0.97 0.05 70); /* papel / livro */ --paper: oklch(0.97 0.014 256); --paper-edge: oklch(0.9 0.025 256); color-scheme: light; } [data-theme="dark"] { --bg: oklch(0.17 0.012 256); --bg-elev: oklch(0.205 0.012 256); --surface: oklch(0.22 0.014 256); --surface-2: oklch(0.25 0.015 256); --sidebar-bg: oklch(0.19 0.014 256); --hover: oklch(0.28 0.018 256); --code-bg: oklch(0.24 0.016 256); --text: oklch(0.97 0.005 80); --text-soft: oklch(0.85 0.008 80); --muted: oklch(0.66 0.012 256); --muted-2: oklch(0.55 0.012 256); --border: oklch(0.32 0.018 256); --border-strong: oklch(0.42 0.02 256); --success: oklch(0.78 0.14 145); --success-bg: oklch(0.32 0.08 145); --error: oklch(0.75 0.16 25); --error-bg: oklch(0.32 0.1 25); --warning: oklch(0.82 0.14 70); --warning-bg: oklch(0.32 0.08 70); --paper: oklch(0.22 0.018 80); --paper-edge: oklch(0.3 0.04 75); color-scheme: dark; } /* Acento — azul refinado (padrão) */ :root, [data-accent="blue"] { --accent: oklch(0.55 0.18 254); --accent-2: oklch(0.68 0.16 254); --accent-soft: oklch(0.94 0.04 254); --accent-ink: #ffffff; --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent); } [data-theme="dark"][data-accent="blue"], [data-theme="dark"]:root { --accent: oklch(0.7 0.16 254); --accent-2: oklch(0.82 0.13 254); --accent-soft: oklch(0.3 0.08 254); --accent-ink: oklch(0.12 0.02 254); } [data-accent="teal"] { --accent: oklch(0.58 0.13 195); --accent-2: oklch(0.72 0.11 195); --accent-soft: oklch(0.94 0.04 195); --accent-ink: #ffffff; --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent); } [data-accent="plum"] { --accent: oklch(0.5 0.18 320); --accent-2: oklch(0.66 0.16 320); --accent-soft: oklch(0.94 0.04 320); --accent-ink: #ffffff; --accent-tint: color-mix(in oklab, var(--accent) 12%, transparent); } [data-accent="amber"] { --accent: oklch(0.62 0.16 60); --accent-2: oklch(0.78 0.14 70); --accent-soft: oklch(0.95 0.05 75); --accent-ink: oklch(0.15 0.02 60); --accent-tint: color-mix(in oklab, var(--accent) 14%, transparent); } /* Espaçamento, raios e tipografia */ :root { --space-unit: 8px; --row-h: 44px; --pad-card: 20px; --pad-screen: 32px; --gap-card: 16px; --text-base: 15px; --card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -8px rgba(15,23,42,0.08); --card-border: 1px solid transparent; --card-bg: var(--surface); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; } [data-theme="dark"] { --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -8px rgba(0,0,0,0.5); }