/* ============================================================================= * Minutely Design Tokens — Hybrid (Archive reading + Ledger workflow chips) * Theme: * ============================================================================= */ :root { /* Spacing (4px base) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --radius-xs: 4px; --radius-sm: 8px; --radius-ui: 10px; --radius-md: 12px; --radius-card: 16px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; /* Typography */ --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-doc: "Source Serif 4", Georgia, "Times New Roman", serif; --font-display: "Source Serif 4", Georgia, serif; --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-note: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 2rem; --leading-ui: 1.5; --leading-note: 1.75; --leading-tight: 1.25; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; } /* ─── LIGHT THEME ─── */ [data-theme="light"], [data-bs-theme="light"] { --color-primary: #2f4570; --color-primary-hover: #243659; --color-primary-soft: rgb(47 69 112 / 0.1); --color-primary-border: rgb(47 69 112 / 0.28); --color-secondary: #5c6b8a; --color-secondary-soft: rgb(92 107 138 / 0.12); --color-accent: #6366f1; --color-accent-gold: #9a7b2e; --color-accent-soft: rgb(99 102 241 / 0.1); /* MoM / template affordances — teal complements institutional slate */ --color-template: #0f766e; --color-template-hover: #0d6560; --color-template-soft: rgb(15 118 110 / 0.09); --color-template-border: rgb(15 118 110 / 0.32); --bg-base: #f8f7f4; --bg-surface: #ffffff; --bg-elevated: #f3f0e8; --bg-inset: #ebe6dc; --bg-border: #d9d4c8; --bg-border-strong: #c4bdb0; --text-strong: #1c1917; --text-default: #292524; --text-muted: #57534e; --text-subtle: #78716c; --text-inverse: #faf9f6; --focus-ring: rgb(47 69 112 / 0.35); --overlay-scrim: rgb(28 25 23 / 0.45); --shadow-xs: 0 1px 2px rgb(28 25 23 / 0.04); --shadow-sm: 0 2px 8px rgb(28 25 23 / 0.06); --shadow-md: 0 8px 24px rgb(28 25 23 / 0.08); --shadow-lg: 0 16px 48px rgb(28 25 23 / 0.12); --shadow-focus: 0 0 0 3px var(--focus-ring); --shadow-brand: var(--shadow-focus); --shadow-glow: 0 0 40px rgb(47 69 112 / 0.1); --shadow-card: var(--shadow-xs); --shadow-elevated: var(--shadow-lg); --gradient-brand: linear-gradient(135deg, #2f4570 0%, #3d5a8a 100%); --gradient-hero: linear-gradient(180deg, #ffffff 0%, #faf9f6 60%, #ffffff 100%); --gradient-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgb(47 69 112 / 0.1) 0%, transparent 70%); /* Workflow chips */ --wf-draft-fg: #7c5e10; --wf-draft-bg: #fef3c7; --wf-draft-border: #fcd34d; --wf-pending-fg: #1e4a8c; --wf-pending-bg: #dbeafe; --wf-pending-border: #93c5fd; --wf-approved-fg: #14532d; --wf-approved-bg: #dcfce7; --wf-approved-border: #86efac; --wf-rejected-fg: #7f1d1d; --wf-rejected-bg: #fee2e2; --wf-rejected-border: #fca5a5; --wf-shared-fg: #115e59; --wf-shared-bg: #ccfbf1; --wf-shared-border: #5eead4; --wf-info-fg: #1e3a5f; --wf-info-bg: #e0e7ff; --wf-info-border: #a5b4fc; --wf-live-fg: #14532d; --wf-live-bg: #dcfce7; --wf-live-border: #4ade80; --wf-archived-fg: #57534e; --wf-archived-bg: #f5f5f4; --wf-archived-border: #d6d3d1; --semantic-success: #166534; --semantic-success-soft: rgb(22 101 52 / 0.1); --semantic-warning: #a16207; --semantic-warning-soft: rgb(161 98 7 / 0.1); --semantic-error: #991b1b; --semantic-error-soft: rgb(153 27 27 / 0.1); --semantic-info: #1d4ed8; --semantic-info-soft: rgb(29 78 216 / 0.1); --note-ai-bg: rgb(99 102 241 / 0.06); --note-ai-border: rgb(99 102 241 / 0.3); --note-human-bg: rgb(47 69 112 / 0.05); --note-human-border: rgb(47 69 112 / 0.25); --note-action-bg: rgb(22 101 52 / 0.06); --note-action-border: rgb(22 101 52 / 0.3); --action-approve-bg: #166534; --action-approve-hover: #14532d; --action-approve-fg: #ffffff; --action-reject-bg: #ffffff; --action-reject-fg: #991b1b; --action-reject-border: #fca5a5; --action-changes-bg: #ffffff; --action-changes-fg: #1e4a8c; --action-changes-border: #93c5fd; /* Legacy aliases (backward compat during migration) */ --surface-base: var(--bg-base); --surface-raised: var(--bg-surface); --surface-overlay: var(--bg-elevated); --surface-inset: var(--bg-inset); --border-subtle: var(--bg-border); --border-strong: var(--bg-border-strong); --text-primary: var(--text-strong); --text-secondary: var(--text-default); --text-tertiary: var(--text-muted); --brand: var(--color-primary); --brand-hover: var(--color-primary-hover); --brand-soft: var(--color-primary-soft); --brand-border: var(--color-primary-border); --brand-primary: var(--color-primary); --brand-primary-hover: var(--color-primary-hover); --brand-primary-soft: var(--color-primary-soft); --brand-glow: var(--color-primary-soft); --accent: var(--color-accent-gold); --accent-soft: rgb(154 123 46 / 0.12); --signal: var(--color-accent-gold); --signal-soft: rgb(154 123 46 / 0.12); --success: var(--semantic-success); --success-soft: var(--semantic-success-soft); --warning: var(--semantic-warning); --warning-soft: var(--semantic-warning-soft); --danger: var(--semantic-error); --danger-soft: var(--semantic-error-soft); --info: var(--semantic-info); --info-soft: var(--semantic-info-soft); --Primary-SurfaceDefault: var(--color-primary); --paper: #f4efe3; --bs-body-bg: var(--bg-base); --bs-body-color: var(--text-strong); --bs-primary: var(--color-primary); --bs-primary-rgb: 47, 69, 112; --bs-link-color: var(--color-primary); --bs-link-hover-color: var(--color-primary-hover); --bs-border-color: var(--bg-border); } /* ─── DARK THEME ─── */ [data-theme="dark"], [data-bs-theme="dark"] { --color-primary: #8fa3cc; --color-primary-hover: #a8b8db; --color-primary-soft: rgb(143 163 204 / 0.16); --color-primary-border: rgb(143 163 204 / 0.32); --color-secondary: #9aa8bf; --color-secondary-soft: rgb(154 168 191 / 0.14); --color-accent: #a5b4fc; --color-accent-gold: #d4b86a; --color-accent-soft: rgb(165 180 252 / 0.14); --color-template: #2dd4bf; --color-template-hover: #5eead4; --color-template-soft: rgb(45 212 191 / 0.12); --color-template-border: rgb(45 212 191 / 0.35); --bg-base: #141210; --bg-surface: #1e1c19; --bg-elevated: #282522; --bg-inset: #0f0e0c; --bg-border: #3d3832; --bg-border-strong: #524a42; --text-strong: #f5f2eb; --text-default: #e7e2d9; --text-muted: #b8b0a3; --text-subtle: #948c80; --text-inverse: #141210; --focus-ring: rgb(143 163 204 / 0.45); --overlay-scrim: rgb(0 0 0 / 0.65); --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.2); --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.25); --shadow-md: 0 8px 24px rgb(0 0 0 / 0.35); --shadow-lg: 0 16px 48px rgb(0 0 0 / 0.45); --shadow-focus: 0 0 0 3px var(--focus-ring); --shadow-brand: var(--shadow-focus); --shadow-glow: 0 0 40px rgb(143 163 204 / 0.12); --shadow-card: var(--shadow-xs); --shadow-elevated: var(--shadow-lg); --gradient-brand: linear-gradient(135deg, #8fa3cc 0%, #5c6b8a 100%); --gradient-hero: linear-gradient(180deg, #141210 0%, #1e1c19 60%, #141210 100%); --gradient-glow: radial-gradient(ellipse 60% 40% at 50% 0%, rgb(143 163 204 / 0.15) 0%, transparent 70%); --wf-draft-fg: #fcd34d; --wf-draft-bg: rgb(252 211 77 / 0.12); --wf-draft-border: rgb(252 211 77 / 0.35); --wf-pending-fg: #93c5fd; --wf-pending-bg: rgb(147 197 253 / 0.12); --wf-pending-border: rgb(147 197 253 / 0.35); --wf-approved-fg: #86efac; --wf-approved-bg: rgb(134 239 172 / 0.12); --wf-approved-border: rgb(134 239 172 / 0.35); --wf-rejected-fg: #fca5a5; --wf-rejected-bg: rgb(252 165 165 / 0.12); --wf-rejected-border: rgb(252 165 165 / 0.35); --wf-shared-fg: #5eead4; --wf-shared-bg: rgb(94 234 212 / 0.1); --wf-shared-border: rgb(94 234 212 / 0.3); --wf-info-fg: #a5b4fc; --wf-info-bg: rgb(165 180 252 / 0.12); --wf-info-border: rgb(165 180 252 / 0.3); --wf-live-fg: #86efac; --wf-live-bg: rgb(134 239 172 / 0.12); --wf-live-border: rgb(74 222 128 / 0.45); --wf-archived-fg: #a8a29e; --wf-archived-bg: rgb(168 162 158 / 0.1); --wf-archived-border: rgb(168 162 158 / 0.25); --semantic-success: #86efac; --semantic-success-soft: rgb(134 239 172 / 0.12); --semantic-warning: #fcd34d; --semantic-warning-soft: rgb(252 211 77 / 0.12); --semantic-error: #fca5a5; --semantic-error-soft: rgb(252 165 165 / 0.12); --semantic-info: #93c5fd; --semantic-info-soft: rgb(147 197 253 / 0.12); --note-ai-bg: rgb(165 180 252 / 0.08); --note-ai-border: rgb(165 180 252 / 0.35); --note-human-bg: rgb(143 163 204 / 0.08); --note-human-border: rgb(143 163 204 / 0.3); --note-action-bg: rgb(134 239 172 / 0.08); --note-action-border: rgb(134 239 172 / 0.3); --action-approve-bg: #22c55e; --action-approve-hover: #16a34a; --action-approve-fg: #052e16; --action-reject-bg: transparent; --action-reject-fg: #fca5a5; --action-reject-border: rgb(252 165 165 / 0.55); --action-changes-bg: transparent; --action-changes-fg: #93c5fd; --action-changes-border: rgb(147 197 253 / 0.45); --surface-base: var(--bg-base); --surface-raised: var(--bg-surface); --surface-overlay: var(--bg-elevated); --surface-inset: var(--bg-inset); --border-subtle: var(--bg-border); --border-strong: var(--bg-border-strong); --text-primary: var(--text-strong); --text-secondary: var(--text-default); --text-tertiary: var(--text-muted); --brand: var(--color-primary); --brand-hover: var(--color-primary-hover); --brand-soft: var(--color-primary-soft); --brand-border: var(--color-primary-border); --brand-primary: var(--color-primary); --brand-primary-hover: var(--color-primary-hover); --brand-primary-soft: var(--color-primary-soft); --brand-glow: var(--color-primary-soft); --accent: var(--color-accent-gold); --accent-soft: rgb(212 184 106 / 0.14); --signal: var(--color-accent-gold); --signal-soft: rgb(212 184 106 / 0.14); --success: var(--semantic-success); --success-soft: var(--semantic-success-soft); --warning: var(--semantic-warning); --warning-soft: var(--semantic-warning-soft); --danger: var(--semantic-error); --danger-soft: var(--semantic-error-soft); --info: var(--semantic-info); --info-soft: var(--semantic-info-soft); --Primary-SurfaceDefault: var(--color-primary); --paper: #f4efe3; --bs-body-bg: var(--bg-base); --bs-body-color: var(--text-strong); --bs-primary: var(--color-primary); --bs-primary-rgb: 143, 163, 204; --bs-link-color: var(--color-primary-hover); --bs-link-hover-color: var(--color-primary); --bs-border-color: var(--bg-border); }