/* Noosphere Design Tokens * Adopted from "Noosphere Design Directions" — Direction 04 (Codex spine). * Editorial-humanist: parchment + vermilion light, ink + paper-cream dark, * serif body / sans chrome / mono data, soft radii, illuminated accent. * * Light mode lives on :root; dark + high-contrast in themes/*.css. * Open Props is still loaded for sizing primitives but tokens are now * self-contained — no dependency on indigo/violet/gray ramps. * * All component CSS should reference --noo-* tokens, never raw hex. */ :root { color-scheme: light; /* === Surface · parchment (light mode) === */ --noo-text: #1B2434; /* ink-L · primary text */ --noo-text-muted: #6E7686; /* ink-L3 · secondary */ --noo-text-inverse: #F2EBD8; /* cream · text on dark/accent */ --noo-surface: #F2EBD8; /* cream · page */ --noo-surface-raised: #F7F2E2; /* cream-0· cards (subtly lighter) */ --noo-surface-sunken: #E5DCC4; /* cream-2· inputs, hover, code */ --noo-border: #D6CBAE; /* cream-3· rule lines */ --noo-border-muted: #E5DCC4; /* subtle dividers */ /* === Brand · vermilion + gold + lapis === */ --noo-accent: #B43A2E; /* vermilion — "the only color that asks to be clicked" */ --noo-accent-hover: #8C2A20; /* deeper vermilion */ --noo-accent-subtle: #F2DED7; /* parchment-tinted vermilion wash */ --noo-accent-text: #F2EBD8; /* cream on vermilion */ --noo-accent-secondary: #B8893E; /* gold — used in brand gradients */ /* === Status · keyed to the illuminated palette === */ --noo-success: #4F6B58; /* verdigris */ --noo-success-subtle: #DEE6E0; --noo-success-text: #2A3A30; --noo-warning: #B8893E; /* gold/ochre */ --noo-warning-subtle: #F0E3CB; --noo-warning-text: #5A4220; --noo-danger: #8C2A20; /* darker burgundy — heavier than accent */ --noo-danger-subtle: #F2DED7; --noo-danger-text: #5A1A12; --noo-info: #3A5582; /* lapis */ --noo-info-subtle: #DCE3EE; --noo-info-text: #1F2A3E; /* === Gradients · brand wash + radial halo === */ --noo-gradient-brand: linear-gradient(135deg, var(--noo-accent) 0%, var(--noo-accent-secondary) 100%); --noo-gradient-success: linear-gradient(135deg, var(--noo-success) 0%, #2A3A30 100%); --noo-gradient-halo: radial-gradient(circle at 50% 50%, rgba(180, 58, 46, 0.22) 0%, rgba(180, 58, 46, 0.06) 55%, rgba(180, 58, 46, 0) 100%); /* === Always-dark contexts (visualizer, sketches, OG cards) === * These stay dark regardless of theme — the "constellation" surface. */ --noo-surface-dark: #101824; /* ink */ --noo-surface-dark-raised: #162032; /* ink-2 */ --noo-gradient-dark: linear-gradient(135deg, var(--noo-surface-dark) 0%, var(--noo-surface-dark-raised) 100%); --noo-text-on-dark: rgba(237, 229, 210, 0.95); /* cream paper */ --noo-text-on-dark-muted: rgba(237, 229, 210, 0.65); /* === Graph node pigment ramp (illuminated-manuscript ink set) === */ --noo-pigment-lapis: #3A5582; --noo-pigment-vermilion: #B43A2E; --noo-pigment-ochre: #B8893E; --noo-pigment-sepia: #6B523A; --noo-pigment-verdigris: #4F6B58; /* === Typography · three-family stack === */ --noo-font-serif: 'Source Serif 4', 'Iowan Old Style', Charter, Georgia, serif; --noo-font-sans: 'Inter Tight', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --noo-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --noo-font-size-xs: 0.75rem; /* 12 · captions, mono metadata */ --noo-font-size-sm: 0.875rem; /* 14 · secondary */ --noo-font-size-base: 1rem; /* 16 · body */ --noo-font-size-lg: 1.125rem; /* 18 · subheads */ --noo-font-size-xl: 1.375rem; /* 22 · section title */ --noo-font-size-2xl: 1.75rem; /* 28 · page title */ --noo-font-size-3xl: 2.75rem; /* 44 · display */ --noo-font-weight-normal: 400; --noo-font-weight-medium: 500; --noo-font-weight-semibold: 600; --noo-font-weight-bold: 700; --noo-line-height: 1.6; --noo-line-height-tight: 1.18; --noo-tracking-display: -0.022em; /* large serif/sans headings */ --noo-tracking-tight: -0.012em; /* mid-size headings */ --noo-tracking-label: 0.18em; /* uppercase eyebrows */ /* === Spacing · 4px base === */ --noo-space-xs: 4px; --noo-space-sm: 8px; --noo-space-md: 12px; --noo-space-lg: 24px; --noo-space-xl: 32px; --noo-space-2xl: 48px; /* === Borders & Shadows · soft, editorial === */ --noo-radius: 4px; --noo-radius-lg: 6px; --noo-radius-round: 999px; --noo-shadow: 0 1px 2px rgba(27, 36, 52, 0.08), 0 0 0 1px rgba(27, 36, 52, 0.04); --noo-shadow-lg: 0 4px 18px rgba(27, 36, 52, 0.12), 0 0 0 1px rgba(27, 36, 52, 0.04); /* === Motion === */ --noo-ease: cubic-bezier(0.2, 0.0, 0.2, 1); --noo-duration: 0.2s; } /* Auto-detect system preference for dark mode when no manual override. * The same values as themes/dark.css — duplicated here so the very first * paint never flashes light on a dark-preferring system. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="high-contrast"]) { color-scheme: dark; --noo-text: rgba(237, 229, 210, 0.95); --noo-text-muted: #8A8273; --noo-text-inverse: #1B2434; --noo-surface: #101824; --noo-surface-raised: #162032; --noo-surface-sunken: #0A1018; --noo-border: #2A364C; --noo-border-muted: #1F2A3E; --noo-accent: #D4634F; --noo-accent-hover: #E07B66; --noo-accent-subtle: rgba(212, 99, 79, 0.16); --noo-accent-text: #101824; --noo-accent-secondary: #D6A04D; --noo-success: #6B8772; --noo-success-subtle: rgba(107, 135, 114, 0.18); --noo-success-text: #B8C9BD; --noo-warning: #D6A04D; --noo-warning-subtle: rgba(214, 160, 77, 0.18); --noo-warning-text: #E8C898; --noo-danger: #D4634F; --noo-danger-subtle: rgba(212, 99, 79, 0.18); --noo-danger-text: #E89A8B; --noo-info: #5570A0; --noo-info-subtle: rgba(85, 112, 160, 0.18); --noo-info-text: #A8B8D0; --noo-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(237, 229, 210, 0.04); --noo-shadow-lg: 0 4px 22px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(237, 229, 210, 0.06); } }