/* * Quiver · design tokens * ---------------------------------------------------------- * Single source of truth for the focus-first redesign. * Extracted from the six approved mockups in /mockups/. * If you change a value here, it changes everywhere. */ :root { /* ── Color: warm studio palette in OKLCH ───────────────── */ --bg: oklch(0.965 0.018 82); --studio: oklch(0.30 0.09 148); --studio-soft: oklch(0.93 0.04 148); /* Translucent studio-green wash for tinted pills, focus rings, and subtle accent backgrounds. Was previously undefined, and several screens fell back to a leftover purple-blue rgba — so real purple was shipping. Defining it here closes that gap. */ --studio-tint: oklch(0.30 0.09 148 / 0.08); --surface: oklch(0.992 0.006 82); /* Warm tint for hover strips, tabs, queue rows (was referenced across screens after a rename). */ --surface-warm: oklch(0.97 0.014 82); /* Soft highlight wash for flagged doc lines (replaces legacy --highlight). */ --surface-weak: oklch(0.945 0.045 95); --surface-strong: oklch(0.925 0.03 82); --text: oklch(0.19 0.018 72); --muted: oklch(0.46 0.025 72); --muted-soft: oklch(0.50 0.025 72); --border: oklch(0.84 0.028 82); --border-soft: oklch(0.9 0.022 82); --primary: var(--studio); --primary-strong: var(--studio-deep); --primary-soft: var(--studio-soft); --success: oklch(0.55 0.12 145); --success-soft: oklch(0.93 0.055 145); --warning: oklch(0.64 0.13 78); --warning-soft: oklch(0.94 0.07 82); --danger: oklch(0.55 0.16 28); --danger-soft: oklch(0.93 0.055 28); --danger-strong: oklch(0.42 0.16 28); --danger-hover: oklch(0.36 0.16 28); --danger-armed: oklch(0.30 0.16 28); --danger-disabled: oklch(0.65 0.04 28); --danger-pulse: oklch(0.55 0.16 28 / 0.5); /* Subtler tints used in deep states (active rows, glow) */ /* --highlight removed - use --surface-weak */ --studio-deep: oklch(0.22 0.07 148); --studio-mid: oklch(0.36 0.08 148); --studio-tone: oklch(0.75 0.06 148); /* Extended state colors (for borders and muted states) */ --success-muted: oklch(0.7 0.09 145); --success-border: oklch(0.85 0.06 145); --warning-border: oklch(0.85 0.07 82); --danger-border: oklch(0.85 0.08 28); /* Overlay scrim — warm-tinted dark, used for modal backdrops */ --overlay: oklch(0.19 0.018 72 / 0.4); /* Shadow family — warm-tinted dark base at various elevations */ --shadow-warm-xs: 0 1px 0 oklch(0.19 0.018 72 / 0.04); --shadow-warm-sm: 0 6px 20px oklch(0.19 0.018 72 / 0.06); --shadow-warm-md: 0 6px 20px oklch(0.19 0.018 72 / 0.15); --shadow-warm-lg: 0 24px 60px oklch(0.19 0.018 72 / 0.25); --shadow-warm-xl: 0 24px 64px oklch(0.19 0.018 72 / 0.18); --shadow-warm-card: 0 6px 16px oklch(0.19 0.018 72 / 0.08); --shadow-warm-toast: 0 12px 32px oklch(0.19 0.018 72 / 0.12); --shadow-warm-scrim: oklch(0.19 0.018 72 / 0.45); /* Glow family — studio-green at various alphas (focus rings, pulses) */ --glow-studio-sm: 0 0 0 6px oklch(0.45 0.12 145 / 0.06); --glow-studio-ring: 0 0 0 3px oklch(0.45 0.12 145 / 0.18); /* Focus rings */ --studio-focus-ring: oklch(0.30 0.09 148 / 0.10); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ── Typography ────────────────────────────────────────── */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display serif for identity-carrying moments (auth headline, future marketing surfaces). Use sparingly — one element per surface, never for body. Fraunces ships with optical sizing and a real italic, so inside a display headline becomes a genuine typographic accent instead of a color shift. */ --font-display: "Fraunces", "Iowan Old Style", "Hoefler Text", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --fz-display: clamp(2.4rem, 5vw, 5.4rem); --fz-hero: clamp(2rem, 4.5vw, 3.6rem); --fz-section: 1.5rem; --fz-title: 1.125rem; --fz-body: 0.9375rem; --fz-small: 0.8125rem; --fz-eyebrow: 0.6875rem; /* --fw-display consolidated into --fw-bold */ --fw-bold: 760; --fw-strong: 720; --fw-medium: 600; --fw-regular: 450; --lh-tight: 1.05; --lh-snug: 1.32; --lh-base: 1.55; --lh-relaxed: 1.65; --ls-display: -0.045em; --ls-tight: -0.025em; --ls-snug: -0.015em; --ls-eyebrow: 0.12em; /* ── Radius ────────────────────────────────────────────── */ --rad-xs: 6px; --rad-sm: 10px; --rad-md: 14px; --rad-lg: 18px; --rad-xl: 22px; --rad-pill: 999px; /* ── Spacing ───────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 28px; --sp-7: 36px; --sp-8: 48px; --sp-9: 64px; --sp-10: 96px; /* ── Shadow ────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px oklch(0.19 0.018 72 / 0.06); --shadow-sm: 0 4px 12px oklch(0.19 0.018 72 / 0.04); --shadow-md: 0 8px 24px oklch(0.19 0.018 72 / 0.06); --shadow-lg: 0 24px 60px oklch(0.19 0.018 72 / 0.10), 0 4px 12px oklch(0.19 0.018 72 / 0.04); /* Primary-button lift. Neutral, not green-tinted. The earlier 0.22-alpha green glow read as the "candy button" SaaS template look; a small neutral shadow lifts the button off the canvas without coloring something that's already colored. */ --shadow-cta: 0 4px 14px oklch(0.19 0.018 72 / 0.10); /* ── Motion ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* Alias for animations that expect a named transition curve (e.g. toast.css). */ --transition-base: var(--ease-out); --t-fast: 120ms; --t-normal: 180ms; --t-slow: 250ms; /* ── Layout limits ─────────────────────────────────────── */ --max-app: 1200px; --max-content: 760px; --max-card: 620px; --max-doc: 640px; --topbar-height: 60px; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-normal: 0ms; --t-slow: 0ms; } } /* ===== Consolidation Notes ===== * Legacy renames (historical; current tokens above are authoritative): * --highlight → --surface-weak (flagged doc lines) * --fw-display → --fw-bold */