/* ========================================================== CarryForward — Multi-Theme Token System Four themes: dark, light, blue (deep sea), orange (ember) Switch by setting data-theme="dark|light|blue|orange" on ========================================================== */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap'); /* ---------------------------------------------------------- THEME 1: DARK (default) ---------------------------------------------------------- */ :root, [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2333; --surface-3: #21283a; --border: #2a3a52; --border-2: #354a66; --accent: #00e676; --accent-dim: rgba(0,230,118,0.10); --accent-glow: rgba(0,230,118,0.18); --accent-mid: #00804d; --text: #e8edf2; --text-2: #8b96a8; --text-3: #3a4a60; --text-inv: #0d1117; --danger: #ff5570; --danger-dim: rgba(255,85,112,0.12); --warn: #f0a500; --warn-dim: rgba(240,165,0,0.12); --info: #4db8ff; --info-dim: rgba(77,184,255,0.12); --success: #3ddc84; --success-dim: rgba(61,220,132,0.12); --nav-hover-bg: #1c2333; --nav-hover-text: #f0f4f8; --nav-hover-w: 500; --btn-bg: #1c2333; --btn-hover: #21283a; --topbar-bg: rgba(13,17,23,0.94); --sidebar-bg: #161b22; --sidebar-bdr: #2a3a52; --popup-bg: #161b22; --popup-bdr: #354a66; --popup-shadow: 0 -6px 28px rgba(0,0,0,0.70); --logo-carry: #e8edf2; /* Lifecycle states */ --lifecycle-active: var(--success); --lifecycle-active-bg: var(--success-dim); --lifecycle-challenged: var(--warn); --lifecycle-challenged-bg: var(--warn-dim); --lifecycle-stale: var(--danger); --lifecycle-stale-bg: var(--danger-dim); /* Confidence tiers */ --confidence-high: var(--text); --confidence-mid: var(--warn); --confidence-low: var(--danger); /* Precision pills */ --precision-message: var(--success); --precision-message-bg: var(--success-dim); --precision-conv: var(--warn); --precision-conv-bg: var(--warn-dim); /* Body texture */ --body-bg-image: none; /* Semantic colours */ --purple: #a78bfa; --orange: #f97316; /* Glow effects */ --glow-accent: 0 0 12px var(--accent-glow), 0 0 24px rgba(0,230,118,0.08); --glow-sm: 0 0 6px var(--accent-glow); } /* ---------------------------------------------------------- THEME 2: LIGHT ---------------------------------------------------------- */ [data-theme="light"] { --bg: #f4f1ea; --surface: #ffffff; --surface-2: #f9f7f2; --surface-3: #ede9e0; --border: #d4ccbb; --border-2: #c0b8a8; --accent: #c96800; --accent-dim: rgba(201,104,0,0.08); --accent-glow: rgba(201,104,0,0.16); --accent-mid: #954d00; --text: #181410; --text-2: #6b5f50; --text-3: #b0a899; --text-inv: #ffffff; --danger: #c0392b; --danger-dim: rgba(192,57,43,0.08); --warn: #b05e00; --warn-dim: rgba(176,94,0,0.08); --info: #1a6bb5; --info-dim: rgba(26,107,181,0.08); --success: #1a7a40; --success-dim: rgba(26,122,64,0.08); --nav-hover-bg: #e6e0d6; --nav-hover-text: #0d0b08; --nav-hover-w: 600; --btn-bg: #f0ece3; --btn-hover: #e4dfd5; --topbar-bg: rgba(244,241,234,0.94); --sidebar-bg: #ffffff; --sidebar-bdr: #d4ccbb; --popup-bg: #ffffff; --popup-bdr: #d4ccbb; --popup-shadow: 0 -6px 28px rgba(0,0,0,0.13); --logo-carry: #181410; --lifecycle-active: var(--success); --lifecycle-active-bg: var(--success-dim); --lifecycle-challenged: var(--warn); --lifecycle-challenged-bg: var(--warn-dim); --lifecycle-stale: var(--danger); --lifecycle-stale-bg: var(--danger-dim); --confidence-high: var(--text); --confidence-mid: var(--warn); --confidence-low: var(--danger); --precision-message: var(--success); --precision-message-bg: var(--success-dim); --precision-conv: var(--warn); --precision-conv-bg: var(--warn-dim); --body-bg-image: none; --purple: #6d28d9; --orange: #c96800; --glow-accent: 0 2px 10px rgba(201,104,0,0.20); --glow-sm: 0 1px 5px rgba(201,104,0,0.16); } /* ---------------------------------------------------------- THEME 3: BLUE — Deep Sea ---------------------------------------------------------- */ [data-theme="blue"] { --bg: #050c1c; --surface: #08122a; --surface-2: #0d1a36; --surface-3: #132042; --border: #1a2d50; --border-2: #213660; --accent: #22d3ee; --accent-dim: rgba(34,211,238,0.10); --accent-glow: rgba(34,211,238,0.20); --accent-mid: #0891b2; --text: #c8dff0; --text-2: #7aaac8; --text-3: #2a4a6a; --text-inv: #050c1c; --danger: #f87171; --danger-dim: rgba(248,113,113,0.12); --warn: #fbbf24; --warn-dim: rgba(251,191,36,0.12); --info: #22d3ee; --info-dim: rgba(34,211,238,0.12); --success: #34d399; --success-dim: rgba(52,211,153,0.12); --nav-hover-bg: #132042; --nav-hover-text: #e4f0fb; --nav-hover-w: 500; --btn-bg: #0d1a36; --btn-hover: #132042; --topbar-bg: rgba(5,12,28,0.92); --sidebar-bg: #08122a; --sidebar-bdr: #1a2d50; --popup-bg: #08122a; --popup-bdr: #213660; --popup-shadow: 0 -6px 28px rgba(0,0,0,0.65); --logo-carry: #c8dff0; --lifecycle-active: var(--success); --lifecycle-active-bg: var(--success-dim); --lifecycle-challenged: var(--warn); --lifecycle-challenged-bg: var(--warn-dim); --lifecycle-stale: var(--danger); --lifecycle-stale-bg: var(--danger-dim); --confidence-high: var(--text); --confidence-mid: var(--warn); --confidence-low: var(--danger); --precision-message: var(--success); --precision-message-bg: var(--success-dim); --precision-conv: var(--warn); --precision-conv-bg: var(--warn-dim); --body-bg-image: none; --purple: #a78bfa; --orange: #f97316; --glow-accent: 0 0 14px var(--accent-glow), 0 0 28px rgba(34,211,238,0.06); --glow-sm: 0 0 6px var(--accent-glow); } /* ---------------------------------------------------------- THEME 4: ORANGE — Ember (brand) ---------------------------------------------------------- */ [data-theme="orange"] { --bg: #0f0b07; --surface: #1a1108; --surface-2: #22180a; --surface-3: #2c200d; --border: #30200a; --border-2: #3e2a10; --accent: #f97316; --accent-dim: rgba(249,115,22,0.10); --accent-glow: rgba(249,115,22,0.22); --accent-mid: #c2580a; --text: #f0ddc8; --text-2: #b08460; --text-3: #5a3e26; --text-inv: #0f0b07; --danger: #fc6060; --danger-dim: rgba(252,96,96,0.12); --warn: #ffd060; --warn-dim: rgba(255,208,96,0.12); --info: #60c8ff; --info-dim: rgba(96,200,255,0.12); --success: #4ade80; --success-dim: rgba(74,222,128,0.12); --nav-hover-bg: #2c200d; --nav-hover-text: #faebd8; --nav-hover-w: 500; --btn-bg: #22180a; --btn-hover: #2c200d; --topbar-bg: rgba(15,11,7,0.92); --sidebar-bg: #1a1108; --sidebar-bdr: #30200a; --popup-bg: #1a1108; --popup-bdr: #3e2a10; --popup-shadow: 0 -6px 28px rgba(0,0,0,0.65); --logo-carry: #f0ddc8; --lifecycle-active: var(--success); --lifecycle-active-bg: var(--success-dim); --lifecycle-challenged: var(--warn); --lifecycle-challenged-bg: var(--warn-dim); --lifecycle-stale: var(--danger); --lifecycle-stale-bg: var(--danger-dim); --confidence-high: var(--text); --confidence-mid: var(--warn); --confidence-low: var(--danger); --precision-message: var(--success); --precision-message-bg: var(--success-dim); --precision-conv: var(--warn); --precision-conv-bg: var(--warn-dim); --body-bg-image: none; --purple: #c084fc; --orange: #f97316; --glow-accent: 0 0 14px var(--accent-glow), 0 0 28px rgba(249,115,22,0.06); --glow-sm: 0 0 6px var(--accent-glow); } /* ---------------------------------------------------------- SHARED TOKENS — same across all themes ---------------------------------------------------------- */ :root { /* Typography */ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-base: var(--font-mono); --font-display: var(--font-mono); --font-code: var(--font-mono); /* Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* Leading */ --leading-tight: 1.25; --leading-normal: 1.55; --leading-loose: 1.8; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.15em; --tracking-widest: 0.25em; /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Borders & radius */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-pill: 999px; --border-width: 1px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); /* Transitions */ --duration-fast: 100ms; --duration-normal: 180ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --transition: var(--duration-normal) var(--ease-out); /* Theme transition — smooth swap */ --theme-transition: background-color var(--duration-slow) var(--ease-in-out), color var(--duration-slow) var(--ease-in-out), border-color var(--duration-slow) var(--ease-in-out); /* Layout */ --max-width-content: 680px; --max-width-wide: 960px; --max-width-full: 1280px; --header-height: 56px; --sidebar-width: 220px; /* PWA safe areas */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }