/* ============================================================================ NEANDER — DESIGN TOKENS "Quiet Machine" — premium monochrome with mesh + grain. ---------------------------------------------------------------------------- Two-tier token system: 1. PRIMITIVES — raw values (the palette, the scales). Never used directly in components; they are the single source of truth. 2. SEMANTIC — meaning-bearing aliases (--color-bg, --color-text, …). Components consume ONLY these. Swap the primitives behind them and the whole UI re-themes (e.g. future dark mode). ========================================================================== */ :root { /* ========================================================================== 1 · PRIMITIVES ========================================================================== */ /* --- Neutral ramp ------------------------------------------------------- A near-neutral scale with a whisper of warmth (reads "crafted" rather than "clinical"). 0 = paper white, 1000 = ink. */ --neutral-0: #ffffff; --neutral-25: #fcfcfb; --neutral-50: #f8f8f6; --neutral-100: #f1f0ee; --neutral-150: #e9e8e5; --neutral-200: #dededa; --neutral-300: #c8c7c2; --neutral-400: #a8a7a1; --neutral-500: #86857f; --neutral-600: #6a6964; --neutral-700: #4e4d49; --neutral-800: #343330; --neutral-900: #201f1c; --neutral-950: #141312; --neutral-1000: #0b0b0a; /* Alpha inks — for hairlines, overlays, tints that sit on any surface. */ --ink-a04: rgba(11, 11, 10, 0.04); --ink-a06: rgba(11, 11, 10, 0.06); --ink-a08: rgba(11, 11, 10, 0.08); --ink-a12: rgba(11, 11, 10, 0.12); --ink-a16: rgba(11, 11, 10, 0.16); --ink-a24: rgba(11, 11, 10, 0.24); --ink-a40: rgba(11, 11, 10, 0.40); --ink-a64: rgba(11, 11, 10, 0.64); --paper-a08: rgba(255, 255, 255, 0.08); --paper-a60: rgba(255, 255, 255, 0.60); --paper-a80: rgba(255, 255, 255, 0.80); /* --- Functional hues (vivid — state only, never decoration) ------------- */ --green-50: #e6f7ee; --green-500: #16a75c; --green-700: #0c7d41; --amber-50: #fdf2da; --amber-500: #f0980e; --amber-700: #b56a00; --red-50: #fce9e6; --red-500: #e63b2e; --red-700: #b0271b; --blue-50: #e7f1fe; --blue-500: #2b7ff1; --blue-700: #1657c2; /* --- Mesh palette — vibrant, soft-blurred spectrum ----------------------- Saturated hues, kept premium by heavy blur, large spreads, masks + grain. Color lives in the ATMOSPHERE; the UI chrome itself stays near-monochrome. */ --mesh-indigo: #aab4ff; /* vivid periwinkle */ --mesh-sky: #8fd3f6; /* vivid sky */ --mesh-violet: #c7a6f2; /* vivid lavender */ --mesh-peach: #ffc599; /* vivid peach */ --mesh-mint: #93e6c4; /* vivid mint */ --mesh-rose: #ffadcb; /* vivid rose */ --mesh-pink: #ff8fc6; /* vivid pink — neander.ai echo */ --mesh-gold: #ffcd84; /* vivid gold */ /* Legacy aliases (older recipes resolve via these) */ --mesh-cool: var(--mesh-sky); --mesh-warm: var(--mesh-peach); --mesh-neutral: var(--mesh-violet); /* Optional restrained accent — derived from the indigo bloom. Reserved for the tiniest interactive touches (focus tint, link wash). UI stays ink. */ --accent-indigo: #5a5bd8; --accent-indigo-50: #eeeefc; /* ========================================================================== 2 · TYPOGRAPHY ========================================================================== */ /* SF Pro (Apple system font) → Inter fallback for non-Apple platforms. -apple-system / BlinkMacSystemFont resolve to SF Pro with correct optical sizing on Safari + Chrome on macOS/iOS. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, "JetBrains Mono", Consolas, monospace; /* Fluid type scale — clamp(min, fluid, max). Display sizes scale with vw. */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.9375rem; /* 15 — premium UI base */ --text-md: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.3125rem; /* 21 */ --text-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 1.875rem); /* 24 → 30 */ --text-3xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.5rem); /* 30 → 40 */ --text-4xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem); /* 36 → 52 */ --text-5xl: clamp(2.75rem, 1.9rem + 3.8vw, 4.25rem); /* 44 → 68 */ --text-6xl: clamp(3.25rem, 2.0rem + 5.4vw, 5.5rem); /* 52 → 88 */ --leading-none: 1; --leading-tight: 1.08; --leading-snug: 1.18; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.08em; /* overlines */ --tracking-widest: 0.16em; /* tiny caps */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ========================================================================== 3 · SPACING (4px base grid · Tailwind-aligned for clean future migration) ========================================================================== */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-28: 7rem; /* 112 */ --space-32: 8rem; /* 128 */ --space-40: 10rem; /* 160 */ --space-48: 12rem; /* 192 */ /* ========================================================================== 4 · RADII ========================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; --radius-full: 999px; /* ========================================================================== 5 · ELEVATION (multi-layer, low-alpha, faintly cool — the "expensive" look) ========================================================================== */ --shadow-xs: 0 1px 1.5px rgba(11,11,10,0.05); --shadow-sm: 0 1px 2px rgba(11,11,10,0.06), 0 1px 1px rgba(11,11,10,0.04); --shadow-md: 0 2px 4px rgba(11,11,10,0.05), 0 4px 12px rgba(11,11,10,0.06); --shadow-lg: 0 4px 8px rgba(11,11,10,0.05), 0 12px 28px rgba(11,11,10,0.08); --shadow-xl: 0 8px 16px rgba(11,11,10,0.06), 0 24px 56px rgba(11,11,10,0.10); --shadow-2xl: 0 16px 32px rgba(11,11,10,0.08), 0 40px 96px rgba(11,11,10,0.14); /* Inset top highlight — gives buttons/surfaces a crafted, lit edge. */ --shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.12); --shadow-inset-lo: inset 0 1px 0 rgba(255,255,255,0.7); /* ========================================================================== 6 · MOTION ========================================================================== */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 340ms; --dur-slower: 520ms; /* ========================================================================== 7 · LAYOUT ========================================================================== */ --container-max: 1200px; --container-prose: 720px; --container-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem); --section-pad-y: clamp(4.5rem, 3rem + 7vw, 9rem); --nav-height: 64px; /* ========================================================================== 8 · Z-INDEX ========================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; /* ========================================================================== 9 · TEXTURE (the signature) ---------------------------------------------------------------------------- Film grain as an inline SVG (fractal noise). Tuned fine + low-contrast so it reads as paper texture, not static. Consumed by the .grain utility. */ --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --noise-opacity: 0.05; /* Grid — faint technical lines (neander.ai reference). Masked + faded in use. */ --grid-line: rgba(18, 18, 18, 0.05); --grid-cell: 128px; /* ========================================================================== SEMANTIC LAYER — components consume ONLY these. ========================================================================== */ /* Surfaces & background */ --color-bg: var(--neutral-0); /* page canvas — pure white */ --color-bg-subtle: var(--neutral-50); --color-surface: var(--neutral-0); /* cards / raised panels (paper) */ --color-surface-sunken: var(--neutral-100); /* wells, code backgrounds */ --color-surface-inverse:var(--neutral-1000); /* ink panels (terminal, footer) */ /* Text */ --color-text: var(--neutral-1000); --color-text-secondary:var(--neutral-700); --color-text-muted: var(--neutral-500); --color-text-subtle: var(--neutral-400); --color-text-inverse: var(--neutral-25); --color-text-inverse-muted: rgba(255,255,255,0.62); /* Borders */ --color-border: var(--ink-a08); --color-border-subtle: var(--ink-a06); --color-border-strong: var(--ink-a16); --color-border-inverse: var(--paper-a08); /* Accent = ink (monochrome). Interest comes from texture, not hue. */ --color-accent: var(--neutral-1000); --color-accent-hover: var(--neutral-900); --color-accent-contrast: var(--neutral-0); /* Focus ring */ --color-focus: var(--neutral-1000); --ring-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); --ring-focus-inset: inset 0 0 0 1.5px var(--color-focus); /* State (semantic) */ --color-success: var(--green-500); --color-success-bg: var(--green-50); --color-warning: var(--amber-500); --color-warning-bg: var(--amber-50); --color-danger: var(--red-500); --color-danger-bg: var(--red-50); --color-info: var(--blue-500); --color-info-bg: var(--blue-50); /* Selection */ --color-selection-bg: var(--neutral-1000); --color-selection-text: var(--neutral-0); } /* ============================================================================ DARK THEME — set html[data-theme="dark"] (the theme toggle resolves system → light/dark and sets this attribute). Only the SEMANTIC layer flips, so every component that consumes semantic tokens re-themes automatically. ========================================================================== */ html[data-theme="dark"] { /* Surfaces */ --color-bg: #0b0b0c; --color-bg-subtle: #131316; --color-surface: #161719; --color-surface-sunken: #1e1f22; --color-surface-inverse:#f4f4f2; /* ink regions invert to light */ /* Text */ --color-text: #f3f3f1; --color-text-secondary: #c3c3bf; --color-text-muted: #8f8f8a; --color-text-subtle: #6a6a65; --color-text-inverse: #161312; --color-text-inverse-muted: rgba(20,19,18,0.55); /* Borders (light, low-alpha) */ --color-border: rgba(255,255,255,0.10); --color-border-subtle: rgba(255,255,255,0.06); --color-border-strong: rgba(255,255,255,0.18); --color-border-inverse: rgba(20,19,18,0.10); /* Accent flips to light — white primary buttons on dark */ --color-accent: #f4f4f2; --color-accent-hover: #ffffff; --color-accent-contrast: #0b0b0c; --color-focus: #f4f4f2; --ring-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus); /* State fills, darker */ --color-success-bg: rgba(22,167,92,0.18); --color-warning-bg: rgba(240,152,14,0.18); --color-danger-bg: rgba(230,59,46,0.18); --color-info-bg: rgba(43,127,241,0.18); /* Selection */ --color-selection-bg: #f4f4f2; --color-selection-text: #0b0b0c; /* Texture — grain must lighten on dark (see base.css), and read a touch more */ --noise-opacity: 0.06; /* Elevation — deeper, darker shadows */ --shadow-xs: 0 1px 1.5px rgba(0,0,0,0.5); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5), 0 1px 1px rgba(0,0,0,0.4); --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 4px 8px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.55); --shadow-xl: 0 8px 16px rgba(0,0,0,0.45), 0 24px 56px rgba(0,0,0,0.6); --shadow-2xl: 0 16px 32px rgba(0,0,0,0.5), 0 40px 96px rgba(0,0,0,0.65); --shadow-inset-lo: inset 0 1px 0 rgba(255,255,255,0.06); } /* App-demo (.appwin) flips to the Neander app's OWN dark theme tokens. */ html[data-theme="dark"] .appwin { --n-ink: #f0f0f0; --n-body: #b8b8b8; --n-sub: #9a9a9a; --n-soft: #858585; --n-white: #161617; --n-matt: #0e0e0f; --n-sidebar: #1c1c1d; --n-soft-bg: #28282a; --n-stroke: rgba(255,255,255,0.06); --n-stroke-2: rgba(255,255,255,0.10); --n-elev-prompt: 0 10px 10px -5px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); }