/* ============================================================================ CaptureForge Design Tokens ---------------------------------------------------------------------------- Single source of truth for color, spacing, radius, shadow, and type. Light and dark themes are ONE contract — every token is defined under both [data-theme="light"] and [data-theme="dark"]. Components must read tokens, never hex literals. See Docs/STYLING.md. ============================================================================ */ :root, html[data-theme="light"] { /* ── Surfaces ───────────────────────────────────────────────── */ --cf-bg: #f3efe9; /* warm paper, not slate-50 */ --cf-bg-grain: #ece7df; --cf-surface: #ffffff; --cf-surface-raised: #ffffff; --cf-surface-sunken: #f7f3ec; --cf-surface-inverse: #15171c; /* ── Ink (text) ─────────────────────────────────────────────── */ --cf-ink: #15171c; /* deep ink, not pure black */ --cf-ink-muted: #4a4f5a; --cf-ink-faint: #8a8f99; --cf-ink-inverse: #f7f3ec; /* ── Lines ──────────────────────────────────────────────────── */ --cf-rule: rgba(20, 22, 28, 0.10); --cf-rule-strong: rgba(20, 22, 28, 0.22); --cf-rule-faint: rgba(20, 22, 28, 0.05); /* ── Brand accents (ember, NOT generic blue) ────────────────── */ --cf-accent: #c25a2a; /* ember rust */ --cf-accent-hover: #a8481c; --cf-accent-active: #8a3a14; --cf-accent-soft: rgba(194, 90, 42, 0.12); --cf-accent-rule: rgba(194, 90, 42, 0.55); --cf-on-accent: #fff8f1; /* ── Brand secondary (deep teal — used sparingly) ───────────── */ --cf-secondary: #1f4d4a; --cf-secondary-soft: rgba(31, 77, 74, 0.12); /* ── Status (semantic only — do not use as decoration) ──────── */ --cf-info: #2c5d8f; --cf-info-soft: rgba(44, 93, 143, 0.12); --cf-success: #2e6b3f; --cf-success-soft: rgba(46, 107, 63, 0.12); --cf-warning: #b9791d; --cf-warning-soft: rgba(185, 121, 29, 0.14); --cf-danger: #a83232; --cf-danger-soft: rgba(168, 50, 50, 0.10); /* ── Focus ──────────────────────────────────────────────────── */ --cf-focus-ring: 0 0 0 3px rgba(194, 90, 42, 0.32); /* ── Shadows (lift + letterpress feel, not generic drop) ────── */ --cf-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(20, 22, 28, 0.06), 0 8px 20px rgba(20, 22, 28, 0.06); --cf-shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(20, 22, 28, 0.10), 0 18px 36px rgba(20, 22, 28, 0.12); --cf-shadow-press: inset 0 1px 2px rgba(20, 22, 28, 0.12); /* ── Sidebar / topbar (deliberately distinct from page) ─────── */ --cf-shell-bg: #15171c; --cf-shell-bg-alt: #1d2027; --cf-shell-ink: #e9e6df; --cf-shell-ink-muted: rgba(233, 230, 223, 0.62); --cf-shell-rule: rgba(255, 255, 255, 0.08); --cf-shell-accent: #e5743c; /* brighter ember on dark shell */ color-scheme: light; } html[data-theme="dark"] { /* ── Surfaces ───────────────────────────────────────────────── */ --cf-bg: #0f1115; --cf-bg-grain: #14171d; --cf-surface: #181b22; --cf-surface-raised: #1d2129; --cf-surface-sunken: #131620; --cf-surface-inverse: #f3efe9; /* ── Ink ────────────────────────────────────────────────────── */ --cf-ink: #ece9e2; --cf-ink-muted: rgba(236, 233, 226, 0.68); --cf-ink-faint: rgba(236, 233, 226, 0.42); --cf-ink-inverse: #15171c; /* ── Lines ──────────────────────────────────────────────────── */ --cf-rule: rgba(236, 233, 226, 0.10); --cf-rule-strong: rgba(236, 233, 226, 0.22); --cf-rule-faint: rgba(236, 233, 226, 0.05); /* ── Accents ────────────────────────────────────────────────── */ --cf-accent: #e5743c; /* warmer in the dark */ --cf-accent-hover: #ef8550; --cf-accent-active: #d56324; --cf-accent-soft: rgba(229, 116, 60, 0.18); --cf-accent-rule: rgba(229, 116, 60, 0.65); --cf-on-accent: #15171c; --cf-secondary: #4d8a86; --cf-secondary-soft: rgba(77, 138, 134, 0.18); /* ── Status ─────────────────────────────────────────────────── */ --cf-info: #6ea6d5; --cf-info-soft: rgba(110, 166, 213, 0.18); --cf-success: #7cbf8d; --cf-success-soft: rgba(124, 191, 141, 0.18); --cf-warning: #e0a85a; --cf-warning-soft: rgba(224, 168, 90, 0.18); --cf-danger: #e07b7b; --cf-danger-soft: rgba(224, 123, 123, 0.16); --cf-focus-ring: 0 0 0 3px rgba(229, 116, 60, 0.42); --cf-shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45); --cf-shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 8px rgba(0, 0, 0, 0.5), 0 22px 44px rgba(0, 0, 0, 0.55); --cf-shadow-press: inset 0 1px 2px rgba(0, 0, 0, 0.5); --cf-shell-bg: #0a0c10; --cf-shell-bg-alt: #11141a; --cf-shell-ink: #ece9e2; --cf-shell-ink-muted: rgba(236, 233, 226, 0.58); --cf-shell-rule: rgba(255, 255, 255, 0.06); --cf-shell-accent: #e5743c; color-scheme: dark; } /* ============================================================================ Tokens that DO NOT change between themes ============================================================================ */ :root { /* ── Type ───────────────────────────────────────────────────── */ --cf-font-display: "Fraunces", "Source Serif Pro", Georgia, serif; --cf-font-ui: "General Sans", "Manrope", "Segoe UI", system-ui, sans-serif; --cf-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --cf-fs-xs: 0.75rem; /* 12 */ --cf-fs-sm: 0.8125rem; /* 13 */ --cf-fs-base: 0.9375rem; /* 15 — slightly tighter than 16, on purpose */ --cf-fs-md: 1.0625rem; /* 17 */ --cf-fs-lg: 1.25rem; /* 20 */ --cf-fs-xl: 1.625rem; /* 26 */ --cf-fs-2xl: 2.125rem; /* 34 */ --cf-fs-3xl: 2.875rem; /* 46 */ --cf-lh-tight: 1.18; --cf-lh-snug: 1.35; --cf-lh-base: 1.55; --cf-fw-regular: 400; --cf-fw-medium: 500; --cf-fw-semibold: 600; --cf-fw-bold: 700; /* ── Spacing (4-step) ───────────────────────────────────────── */ --cf-space-0: 0; --cf-space-1: 0.25rem; /* 4 */ --cf-space-2: 0.5rem; /* 8 */ --cf-space-3: 0.75rem; /* 12 */ --cf-space-4: 1rem; /* 16 */ --cf-space-5: 1.5rem; /* 24 */ --cf-space-6: 2rem; /* 32 */ --cf-space-7: 2.75rem; /* 44 */ --cf-space-8: 4rem; /* 64 */ --cf-pad-tight: var(--cf-space-3); --cf-pad: var(--cf-space-4); --cf-pad-loose: var(--cf-space-6); /* ── Radii (asymmetric — the signature) ─────────────────────── */ --cf-radius-sm: 4px; --cf-radius-md: 8px; --cf-radius-lg: 14px; --cf-radius-card: 4px 14px 14px 14px; /* flat top-left = signature */ --cf-radius-pill: 999px; /* ── Motion ─────────────────────────────────────────────────── */ --cf-motion-quick: 120ms ease-out; --cf-motion-base: 180ms ease-out; --cf-motion-slow: 280ms cubic-bezier(0.2, 0.7, 0.2, 1); /* ── Z-index ────────────────────────────────────────────────── */ --cf-z-base: 1; --cf-z-sticky: 100; --cf-z-shell: 500; --cf-z-modal: 1000; --cf-z-toast: 1100; }