/* Vibe Learn — design tokens * Per design brief §3.2 / §4 / §5 * Accent is a CSS var; dark/light themes via [data-theme] on . * Default server-rendered: data-theme="dark"; client flips via localStorage. */ /* ── @font-face declarations (vendored, OFL-1.1) ───────────────────── */ @font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/static/fonts/Inter-Regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/static/fonts/Inter-Medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('/static/fonts/Inter-Bold.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url('/static/fonts/JetBrainsMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url('/static/fonts/JetBrainsMono-Medium.woff2') format('woff2'); } /* ── Light theme (explicit selector + :root default) ──────────────── */ :root, html[data-theme="light"] { /* ── Surface ─────────────────────────────────────────────────────── */ --bg-canvas: #FAFAF7; --bg-surface: #FFFFFF; --bg-surface-raised:#F4F4EE; --bg-surface-sunken:#F0F0E9; --bg-overlay: rgba(20, 20, 28, 0.55); --border-subtle: #EDEDE6; --border-default: #D9D9D0; --border-strong: #BFBFB5; /* ── Text ────────────────────────────────────────────────────────── */ --text-primary: #14171F; --text-secondary: #4B5260; --text-tertiary: #7D8597; --text-on-accent: #FFFFFF; /* ── Accent (overridable via Tweaks) ─────────────────────────────── */ --accent-h: 222; /* default blue */ --accent-s: 71%; --accent-l: 56%; --accent-primary: hsl(var(--accent-h) var(--accent-s) var(--accent-l)); --accent-primary-hover: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%)); --accent-primary-soft: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 32%)); --accent-primary-ring: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) + 8%) / 0.22); --border-focus: var(--accent-primary); --accent-success: #1FA774; --accent-warning: #C68E14; --accent-danger: #D24747; --accent-info: #1B7AC2; --accent-success-soft: #E3F4EC; --accent-warning-soft: #FBF1DA; --accent-danger-soft: #FBE6E6; --accent-info-soft: #E2F0FA; /* ── Code ────────────────────────────────────────────────────────── */ --code-bg: #F4F4EE; --code-keyword: #7B1FA2; --code-string: #076678; --code-comment: #7C7670; --code-number: #B26A00; --code-fn: #1B7AC2; /* ── Type ────────────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ── Spacing ─────────────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; /* ── Radii ───────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ── Shadows ─────────────────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(20,20,28,.06), 0 6px 20px rgba(20,20,28,.08); --shadow-overlay: 0 8px 32px rgba(20,20,28,.16), 0 2px 4px rgba(20,20,28,.06); --shadow-hover: 0 4px 8px rgba(20,20,28,.08), 0 16px 40px rgba(20,20,28,.12); /* ── Layout ──────────────────────────────────────────────────────── */ --sidebar-w: 240px; --header-h: 56px; --content-narrow: 760px; --content-medium: 920px; --content-wide: 1280px; } /* ── Dark theme ─────────────────────────────────────────────────── */ html[data-theme="dark"] { --bg-canvas: #0F1017; --bg-surface: #17191F; --bg-surface-raised:#1E2028; --bg-surface-sunken:#13151A; --bg-overlay: rgba(0, 0, 0, 0.65); --border-subtle: #22242C; --border-default: #2E3040; --border-strong: #3D4155; --text-primary: #E8EAF0; --text-secondary: #9299AB; --text-tertiary: #5E6476; --text-on-accent: #FFFFFF; --accent-h: 222; --accent-s: 78%; --accent-l: 62%; --accent-success: #28C98E; --accent-warning: #E0A829; --accent-danger: #E55C5C; --accent-info: #4BA6E8; --accent-success-soft: rgba(40, 201, 142, 0.12); --accent-warning-soft: rgba(224, 168, 41, 0.12); --accent-danger-soft: rgba(229, 92, 92, 0.12); --accent-info-soft: rgba(75, 166, 232, 0.12); --code-bg: #1A1C24; --code-keyword: #CF8EF4; --code-string: #6EC0DF; --code-comment: #5A5F70; --code-number: #F0A060; --code-fn: #7BB8F0; --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.4); --shadow-overlay: 0 8px 32px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.3); --shadow-hover: 0 4px 8px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.45); } /* ── Theme-invariant brand tokens ─────────────────────────────── */ :root { --color-white: #FFFFFF; --color-poster-accent: #B73C3C; } /* Accent palette presets (set on ) */ html[data-accent="green"] { --accent-h: 158; --accent-s: 68%; --accent-l: 38%; } html[data-accent="purple"] { --accent-h: 263; --accent-s: 56%; --accent-l: 58%; } html[data-accent="blue"] { --accent-h: 222; --accent-s: 71%; --accent-l: 56%; } /* ────────────────────────────────────────────────────────────────── */ /* Base */ /* ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg-canvas); color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-feature-settings: 'cv11', 'ss01', 'ss03'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-primary-hover); text-decoration: underline; } /* ────────────────────────────────────────────────────────────────── */ /* Typography scale */ /* ────────────────────────────────────────────────────────────────── */ .t-display-1 { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.01em; } .t-display-2 { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.01em; } .t-h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.005em; } .t-h2 { font-size: 22px; line-height: 30px; font-weight: 600; } .t-h3 { font-size: 18px; line-height: 26px; font-weight: 600; } .t-body { font-size: 16px; line-height: 26px; font-weight: 400; } .t-body-strong { font-size: 16px; line-height: 26px; font-weight: 600; } .t-body-sm { font-size: 14px; line-height: 22px; font-weight: 400; } .t-caption { font-size: 12px; line-height: 18px; font-weight: 500; } .t-caption-up{ font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .t-mono { font-family: var(--font-mono); font-size: 14px; line-height: 22px; } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } /* ────────────────────────────────────────────────────────────────── */ /* Layout utilities */ /* ────────────────────────────────────────────────────────────────── */ .stack-1 { display: flex; flex-direction: column; gap: 4px; } .stack-2 { display: flex; flex-direction: column; gap: 8px; } .stack-3 { display: flex; flex-direction: column; gap: 12px; } .stack-4 { display: flex; flex-direction: column; gap: 16px; } .stack-5 { display: flex; flex-direction: column; gap: 20px; } .stack-6 { display: flex; flex-direction: column; gap: 24px; } .stack-7 { display: flex; flex-direction: column; gap: 32px; } .row-1 { display: flex; gap: 4px; align-items: center; } .row-2 { display: flex; gap: 8px; align-items: center; } .row-3 { display: flex; gap: 12px; align-items: center; } .row-4 { display: flex; gap: 16px; align-items: center; } .row-6 { display: flex; gap: 24px; align-items: center; } /* Focus ring */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; } /* Selection */ ::selection { background: var(--accent-primary-ring); } /* Scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 6px; border: 2px solid var(--bg-canvas); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; } /* Skeleton shimmer */ @keyframes vs-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, var(--bg-surface-raised) 0%, var(--bg-surface-sunken) 40%, var(--bg-surface-raised) 80% ); background-size: 200% 100%; animation: vs-shimmer 1.4s linear infinite; border-radius: var(--r-md); } /* Hairline divider */ .hr { height: 1px; background: var(--border-subtle); border: 0; margin: 0; }