/* ============================================================================ course-builder — DESIGN SYSTEM (token contract) ---------------------------------------------------------------------------- This file is the ONLY place colors, fonts and shape values are declared. Every layout/component consumes these variables and never hard-codes a color. "Aplicar um design system conforme o curso" = trocar UM bloco de tema. • A real course loads tokens.css and sets . • The showcase loads all themes and switches data-theme live. To create a new course theme: copy the :root block, rename it to [data-theme="mycourse"], and change only the values. Structure never moves. ============================================================================ */ /* --------------------------------------------------------------------------- THEME 1 — "autonomia" (default · faithful to the reference) Warm paper + single vivid orange accent. Inter, heavy editorial headings. --------------------------------------------------------------------------- */ :root, [data-theme="autonomia"] { /* — surfaces — */ --bg: #e8e4dc; /* warm paper */ --bg-elevated: #f5f2ed; /* header pills, cards, raised chrome */ --bg-sunken: #ded9cf; /* inset / track backgrounds */ --surface-card: #f5f2ed; --overlay: rgba(26, 26, 26, 0.55); /* — ink — */ --ink: #1a1a1a; /* headings + primary text */ --ink-muted: rgba(26, 26, 26, 0.66); --ink-subtle: rgba(26, 26, 26, 0.42); --ink-inverse: #f5f2ed; /* text on dark/accent fills */ /* — accent — */ --accent: #ff4d00; /* the single strong accent */ --accent-hover: #e63f00; --accent-ink: #ffffff; /* text on accent fills */ --accent-soft: rgba(255, 77, 0, 0.08); /* chip / tint backgrounds */ --accent-line: rgba(255, 77, 0, 0.28); /* — lines — */ --border: #d8d4cc; --border-strong: #c4bfb4; /* — semantic — */ --success: #00b464; --bonus: #f5a623; /* ⚡ Bônus / highlighted items */ --info: #2563eb; --focus-ring: var(--accent); /* — typography families — */ --font-display: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* — type scale (fluid) — */ --fs-eyebrow: 0.72rem; --fs-label: 0.75rem; --fs-small: 0.82rem; --fs-body: 1rem; --fs-lead: 1.12rem; --fs-h3: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); --fs-h2: clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem); --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 3rem); --fs-display: clamp(2.6rem, 1.6rem + 4.5vw, 4rem); /* — weights — */ --fw-display: 900; --fw-bold: 800; --fw-semi: 600; --fw-medium: 500; --fw-body: 400; /* — tracking / leading — */ --tracking-label: 0.085em; --tracking-display: -0.02em; --leading-display: 1; --leading-heading: 1.12; --leading-body: 1.65; /* — shape — */ --radius-pill: 100px; --radius-lg: 14px; --radius-md: 8px; /* cards / active item (reference value) */ --radius-sm: 6px; --radius-chip: 6px; /* — elevation — */ --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06); --shadow-md: 0 6px 22px rgba(26, 26, 26, 0.1); --shadow-lg: 0 18px 50px rgba(26, 26, 26, 0.16); /* — chrome dimensions — */ --topbar-h: 64px; --progress-h: 40px; --bottombar-h: 64px; --sidebar-w: 288px; --rail-w: 320px; --measure: 46rem; /* comfortable reading width */ /* — motion — */ --dur-fast: 130ms; --dur: 220ms; --dur-slow: 420ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --texture: 0; /* 1 = enable grain/texture overlay for this theme */ } /* --------------------------------------------------------------------------- THEME 2 — "editorial" (light · magazine / playbook) Ivory + ink, high-contrast serif display, oxblood accent, sharp corners. --------------------------------------------------------------------------- */ [data-theme="editorial"] { --bg: #f4f1ea; --bg-elevated: #fbf9f4; --bg-sunken: #ebe6db; --surface-card: #fbf9f4; --overlay: rgba(28, 25, 23, 0.55); --ink: #1c1917; --ink-muted: rgba(28, 25, 23, 0.64); --ink-subtle: rgba(28, 25, 23, 0.4); --ink-inverse: #fbf9f4; --accent: #9b1c1c; /* oxblood */ --accent-hover: #821414; --accent-ink: #fbf9f4; --accent-soft: rgba(155, 28, 28, 0.07); --accent-line: rgba(155, 28, 28, 0.25); --border: #ddd6c8; --border-strong: #c7bda9; --success: #1f7a4d; --bonus: #b7791f; --info: #1d4ed8; --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --font-body: "Figtree", -apple-system, system-ui, sans-serif; --fw-display: 900; --fw-bold: 700; --tracking-display: -0.015em; --leading-display: 1.04; --radius-pill: 100px; --radius-lg: 4px; --radius-md: 3px; --radius-sm: 2px; --radius-chip: 2px; --texture: 1; } /* --------------------------------------------------------------------------- THEME 3 — "midnight" (dark · console / terminal) Near-black + electric lime, mono display. Fits automation/dev courses. --------------------------------------------------------------------------- */ [data-theme="midnight"] { --bg: #0e0f12; --bg-elevated: #16181d; --bg-sunken: #0a0b0e; --surface-card: #16181d; --overlay: rgba(0, 0, 0, 0.66); --ink: #ecedf0; --ink-muted: rgba(236, 237, 240, 0.6); --ink-subtle: rgba(236, 237, 240, 0.36); --ink-inverse: #0e0f12; --accent: #c5f82a; /* electric lime */ --accent-hover: #d4ff4a; --accent-ink: #0e0f12; --accent-soft: rgba(197, 248, 42, 0.1); --accent-line: rgba(197, 248, 42, 0.3); --border: #262a31; --border-strong: #353a44; --success: #34d399; --bonus: #fbbf24; --info: #38bdf8; --font-display: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --font-body: "IBM Plex Sans", -apple-system, system-ui, sans-serif; --fw-display: 800; --fw-bold: 700; --tracking-display: -0.01em; --leading-display: 1.05; --radius-pill: 100px; --radius-lg: 10px; --radius-md: 6px; --radius-sm: 4px; --radius-chip: 4px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.5); --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.6); --texture: 0; } /* --------------------------------------------------------------------------- THEME 4 — "youtube" (light · creator / vídeo) Branco limpo + vermelho YouTube, Roboto. Para cursos de YouTube/criadores. --------------------------------------------------------------------------- */ [data-theme="youtube"] { --bg: #ffffff; --bg-elevated: #f9f9f9; --bg-sunken: #f2f2f2; --surface-card: #ffffff; --overlay: rgba(15, 15, 15, 0.6); --ink: #0f0f0f; --ink-muted: rgba(15, 15, 15, 0.62); --ink-subtle: rgba(15, 15, 15, 0.42); --ink-inverse: #ffffff; --accent: #ff0000; /* YouTube red */ --accent-hover: #cc0000; --accent-ink: #ffffff; --accent-soft: rgba(255, 0, 0, 0.08); --accent-line: rgba(255, 0, 0, 0.26); --border: #e5e5e5; --border-strong: #cfcfcf; --success: #2ba640; --bonus: #ff8a00; --info: #065fd4; /* YouTube link blue */ --font-display: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif; --font-body: "Roboto", -apple-system, "Segoe UI", system-ui, sans-serif; --fw-display: 900; --fw-bold: 700; --tracking-display: -0.02em; --leading-display: 1.02; --radius-pill: 100px; --radius-lg: 14px; --radius-md: 12px; --radius-sm: 8px; --radius-chip: 8px; --texture: 0; } /* --------------------------------------------------------------------------- THEME 5 — "sunset" (light · quente / acolhedor) Pêssego-creme + coral vibrante, Poppins. Cantos macios, clima convidativo. --------------------------------------------------------------------------- */ [data-theme="sunset"] { --bg: #fff6f0; --bg-elevated: #fffbf8; --bg-sunken: #fce6db; --surface-card: #fffbf8; --overlay: rgba(43, 26, 20, 0.5); --ink: #2b1a14; --ink-muted: rgba(43, 26, 20, 0.64); --ink-subtle: rgba(43, 26, 20, 0.42); --ink-inverse: #fffbf8; --accent: #ff5a5f; /* coral */ --accent-hover: #e94a52; --accent-ink: #ffffff; --accent-soft: rgba(255, 90, 95, 0.09); --accent-line: rgba(255, 90, 95, 0.28); --border: #f5d8c8; --border-strong: #ecc2ad; --success: #2faf7a; --bonus: #ffab40; /* golden hour */ --info: #ef6c9a; --font-display: "Poppins", -apple-system, system-ui, sans-serif; --font-body: "Inter", -apple-system, system-ui, sans-serif; --fw-display: 800; --fw-bold: 700; --tracking-display: -0.02em; --leading-display: 1.06; --radius-pill: 100px; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 10px; --radius-chip: 999px; --texture: 0; } /* --------------------------------------------------------------------------- THEME 6 — "ocean" (light · frio / premium) Azul-gelo + teal vibrante, Sora. Calmo, técnico-elegante. --------------------------------------------------------------------------- */ [data-theme="ocean"] { --bg: #f1f7fa; --bg-elevated: #ffffff; --bg-sunken: #e2eef3; --surface-card: #ffffff; --overlay: rgba(11, 31, 42, 0.55); --ink: #0b1f2a; --ink-muted: rgba(11, 31, 42, 0.62); --ink-subtle: rgba(11, 31, 42, 0.4); --ink-inverse: #ffffff; --accent: #0891b2; /* teal-cyan */ --accent-hover: #0e7490; --accent-ink: #ffffff; --accent-soft: rgba(8, 145, 178, 0.09); --accent-line: rgba(8, 145, 178, 0.26); --border: #d4e4ec; --border-strong: #b9d2de; --success: #0ea571; --bonus: #f0a020; --info: #2563eb; --font-display: "Sora", -apple-system, system-ui, sans-serif; --font-body: "Inter", -apple-system, system-ui, sans-serif; --fw-display: 800; --fw-bold: 700; --tracking-display: -0.02em; --leading-display: 1.05; --radius-pill: 100px; --radius-lg: 12px; --radius-md: 10px; --radius-sm: 6px; --radius-chip: 6px; --texture: 0; } /* Respect users who prefer reduced motion (set by base.css too). */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } /* project override: Raleway everywhere + accent sampled from the logo */ :root, [data-theme] { --font-display: "Raleway", -apple-system, "Segoe UI", system-ui, sans-serif; --font-body: "Raleway", -apple-system, "Segoe UI", system-ui, sans-serif; --accent: #7bef05; --accent-hover: #9cf344; --accent-soft: rgba(123, 239, 5, 0.12); --accent-line: rgba(123, 239, 5, 0.32); }