/* ============================================================ QUALIMS — Locked Design Tokens (proposed) Single source of truth. Variants are driven by attributes on : data-theme (light|dark) · data-accent (teal|blue|clay) data-tone (warm|cool) · data-bg (flat|wash) ============================================================ */ :root { /* ── Typography ─────────────────────────────────── */ /* Manrope — основной шрифт продукта (self-hosted manrope.css); Inter — fallback. */ --font-sans: 'Manrope', 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.875rem; /* 14 */ --text-md: 0.9375rem; /* 15 */ --text-lg: 1.0625rem; /* 17 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --w-normal: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* ── Spacing (4px base) ─────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; /* ── Radius ─────────────────────────────────────── */ --r-sm: 7px; --r-md: 11px; --r-lg: 15px; --r-xl: 22px; --r-full: 9999px; /* ── Motion (per UI_GUIDELINES) ─────────────────── */ --m-fast: 110ms; --m-base: 170ms; --m-slow: 220ms; --ease: cubic-bezier(.2,.6,.2,1); /* ── Accent (teal — default) ────────────────────── */ --accent: #0d9488; --accent-strong: #0f766e; --accent-hover: #0b8077; --accent-soft: rgba(13,148,136,.10); --accent-line: rgba(13,148,136,.28); --accent-glow: rgba(13,148,136,.20); --on-accent: #ffffff; /* ── Semantic (muted, calm — not neon) ──────────── */ --ok: #15875f; --ok-soft: rgba(21,135,95,.12); --ok-line: rgba(21,135,95,.30); --warn: #b5790f; --warn-soft: rgba(181,121,15,.12); --warn-line: rgba(181,121,15,.30); --bad: #c4453f; --bad-soft: rgba(196,69,63,.12); --bad-line: rgba(196,69,63,.30); /* ── Neutrals (LIGHT · warm tone default) ───────── */ --bg: #f6f5f2; --bg-tint: transparent; --surface: #ffffff; --surface-2: #f4f2ee; --surface-3: #ece9e3; --line: rgba(28,27,23,.10); --line-strong: rgba(28,27,23,.16); --ink: #1c1b18; --ink-2: #5b574e; --ink-3: #8c887d; --ink-on-accent: #fff; --sidebar-bg: #14201f; --sidebar-ink: rgba(255,255,255,.78); --sidebar-ink-2: rgba(255,255,255,.50); --sidebar-line: rgba(255,255,255,.08); --sidebar-active-bg: rgba(13,148,136,.22); /* ── Elevation ──────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.07); --shadow-md: 0 2px 6px rgba(16,24,40,.06), 0 8px 20px rgba(16,24,40,.08); --shadow-pop:0 12px 32px rgba(16,24,40,.14); } /* ── Tone: cool neutral ─────────────────────────────── */ :root[data-tone="cool"] { --bg: #eef2f6; --surface: #ffffff; --surface-2: #f1f5f9; --surface-3: #e6edf3; --line: rgba(15,23,42,.10); --line-strong: rgba(15,23,42,.16); --ink: #0f172a; --ink-2: #475569; --ink-3: #94a3b8; --sidebar-bg: #0f1b2d; } /* ── Accent: deep blue ──────────────────────────────── */ :root[data-accent="blue"] { --accent: #2e5bd8; --accent-strong: #1e40af; --accent-hover: #2950c4; --accent-soft: rgba(46,91,216,.10); --accent-line: rgba(46,91,216,.28); --accent-glow: rgba(46,91,216,.20); --sidebar-active-bg: rgba(46,91,216,.24); } /* ── Accent: warm clay (Claude-adjacent) ────────────── */ :root[data-accent="clay"] { --accent: #bf5a37; --accent-strong: #9f4628; --accent-hover: #b15030; --accent-soft: rgba(191,90,55,.10); --accent-line: rgba(191,90,55,.28); --accent-glow: rgba(191,90,55,.20); --sidebar-active-bg: rgba(191,90,55,.24); } /* ── Background wash (subtle, static, symmetric ambient from top) ── Single top-centred glow tied to the accent. No corner asymmetry, no second blob — reads as intentional ambient light, not a stray gradient. color-mix keeps it in sync with the active accent. */ :root[data-bg="wash"] { --bg-tint: radial-gradient(135% 70% at 50% -22%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 52%); } /* ============================================================ DARK THEME ============================================================ */ :root[data-theme="dark"] { --bg: #0b0f14; --surface: #141a21; --surface-2: #1b222b; --surface-3: #232c37; --line: rgba(255,255,255,.08); --line-strong: rgba(255,255,255,.15); --ink: #e8eaed; --ink-2: #a7aeb8; --ink-3: #6f7681; --accent: #16b8a6; --accent-strong: #2dd4bf; --accent-hover: #19c2af; --accent-soft: rgba(22,184,166,.14); --accent-line: rgba(22,184,166,.32); --accent-glow: rgba(22,184,166,.26); --ok: #34d399; --ok-soft: rgba(52,211,153,.14); --ok-line: rgba(52,211,153,.30); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.14); --warn-line: rgba(251,191,36,.30); --bad: #f87171; --bad-soft: rgba(248,113,113,.14);--bad-line: rgba(248,113,113,.30); --sidebar-bg: #0a0e13; --sidebar-ink: rgba(255,255,255,.80); --sidebar-line: rgba(255,255,255,.06); --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 4px 16px rgba(0,0,0,.5); --shadow-pop:0 16px 40px rgba(0,0,0,.6); } :root[data-theme="dark"][data-accent="blue"] { --accent: #6088f0; --accent-strong: #93b0f7; --accent-hover: #5580ef; --accent-soft: rgba(96,136,240,.16); --accent-line: rgba(96,136,240,.34); --accent-glow: rgba(96,136,240,.28); } :root[data-theme="dark"][data-accent="clay"] { --accent: #e08259; --accent-strong: #ee9d79; --accent-hover: #db7649; --accent-soft: rgba(224,130,89,.16); --accent-line: rgba(224,130,89,.34); --accent-glow: rgba(224,130,89,.28); } :root[data-theme="dark"][data-bg="wash"] { --bg-tint: radial-gradient(135% 70% at 50% -22%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 52%); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }