/* VENDORED from aether-design@v0.1.1 — do not edit by hand. Re-sync with ./sync-aether.sh */ /* ============================================================= Aether — Colors & Type ---- Two paired surfaces: a senior developer portfolio (.com, professional, "ink" mode dominant) and an agent lab (.lab, playful, "phosphor" accent dominant). One palette. Same fonts. Different posture. Naming convention follows oklch perceptual scale: 50 = lightest, 950 = deepest. Token names skew evocative (ink, paper, aether, ember, sigil, phosphor) rather than literal — these are the brand's working vocabulary and should be used everywhere. ============================================================= */ /* Fonts are the CONSUMER's responsibility — load Spectral / Geist / Geist Mono via or next/font. This file deliberately does NOT @import them: an embedded @import url() forces this token file to be the first thing in any bundle, which breaks strict CSS pipelines (e.g. Turbopack) when tokens.css is imported alongside other stylesheets. See README → "Loading the fonts". */ :root { /* ------------- INK · midnight blue-violet, back-lit ----- Dark end gaps widened so adjacent surfaces visibly stack. ~6L between each step at the dark end (was ~4). */ --ink-950: oklch(0.160 0.048 275); /* page bg — the ground */ --ink-900: oklch(0.225 0.052 275); /* raised surface */ --ink-850: oklch(0.285 0.054 274); /* card on the raised surface */ --ink-800: oklch(0.345 0.054 274); /* elevated card */ --ink-700: oklch(0.430 0.050 272); /* strong hairline / divider */ --ink-600: oklch(0.515 0.046 270); --ink-500: oklch(0.605 0.040 268); /* muted text on dark */ --ink-400: oklch(0.695 0.030 266); --ink-300: oklch(0.785 0.022 263); --ink-200: oklch(0.860 0.016 260); --ink-100: oklch(0.920 0.012 258); /* ------------- PAPER · warm parchment, light-mode surfaces */ --paper-50: oklch(0.985 0.008 80); /* near-white, faint cream */ --paper-100: oklch(0.965 0.012 78); /* page bg, light */ --paper-200: oklch(0.935 0.018 76); /* card bg light */ --paper-300: oklch(0.890 0.022 74); --paper-400: oklch(0.820 0.025 72); /* hairline borders on paper */ --paper-500: oklch(0.720 0.028 70); /* muted ink on paper */ /* ------------- AETHER · the back-light. electric cyan-blue */ --aether-100: oklch(0.960 0.030 210); --aether-200: oklch(0.920 0.062 208); --aether-300: oklch(0.870 0.095 205); --aether-400: oklch(0.820 0.120 203); --aether-500: oklch(0.760 0.140 200); /* signature glow */ --aether-600: oklch(0.650 0.145 202); --aether-700: oklch(0.530 0.135 205); --aether-800: oklch(0.410 0.110 208); /* ------------- EMBER · warmth, friendliness, candle inside */ --ember-100: oklch(0.960 0.025 60); --ember-200: oklch(0.920 0.055 58); --ember-300: oklch(0.880 0.085 56); --ember-400: oklch(0.830 0.115 54); --ember-500: oklch(0.770 0.140 52); /* signature warm */ --ember-600: oklch(0.670 0.155 48); --ember-700: oklch(0.560 0.150 44); /* ------------- SIGIL · the mystic. soft lavender --------- */ --sigil-300: oklch(0.880 0.060 310); --sigil-500: oklch(0.730 0.130 308); /* mystic accent */ --sigil-700: oklch(0.510 0.140 306); /* ------------- PHOSPHOR · LAB-only. cute eldritch glow --- */ --phosphor-300: oklch(0.940 0.110 132); --phosphor-500: oklch(0.860 0.180 130); /* radioactive friend */ --phosphor-700: oklch(0.680 0.180 128); /* ------------- RUST · errors, decay ---------------------- */ --rust-400: oklch(0.720 0.150 30); --rust-500: oklch(0.620 0.180 28); --rust-600: oklch(0.520 0.190 26); /* ============== SEMANTIC — dark (portfolio default) ====== */ --bg: var(--ink-950); --bg-raised: var(--ink-900); --bg-elevated: var(--ink-850); --surface: var(--ink-800); --hairline: color-mix(in oklch, var(--ink-700) 60%, transparent); --hairline-strong: var(--ink-700); --fg: var(--ink-100); /* primary text */ --fg-2: var(--ink-300); /* secondary */ --fg-3: var(--ink-500); /* muted */ --fg-inv: var(--ink-950); /* on glow */ --accent: var(--aether-500); --accent-soft: var(--aether-300); --accent-deep: var(--aether-700); --accent-warm: var(--ember-500); --accent-mystic: var(--sigil-500); --link: var(--aether-400); --link-hover: var(--aether-300); --success: var(--aether-500); --warn: var(--ember-500); --error: var(--rust-500); /* ============== TYPE ====================================== */ --font-display: "Spectral", "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-body: "Geist", "Söhne", "Helvetica Neue", system-ui, sans-serif; --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* fluid scale — 1.25 minor third, body anchor 16px */ --t-eyebrow: 0.78rem; /* 12.5px */ --t-small: 0.875rem; /* 14px */ --t-body: 1rem; /* 16px */ --t-lead: 1.125rem; /* 18px — long-form lead */ --t-h6: 1.125rem; --t-h5: 1.375rem; --t-h4: 1.75rem; --t-h3: 2.25rem; --t-h2: 3rem; --t-h1: 4rem; --t-display: 5.5rem; /* hero */ --leading-tight: 1.08; --leading-snug: 1.22; --leading-body: 1.55; --leading-loose: 1.75; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; --tracking-eyebrow: 0.18em; /* ============== SPACING (4-base) ========================== */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ /* ============== RADII ===================================== */ --r-1: 4px; /* chips, inputs */ --r-2: 8px; /* cards */ --r-3: 14px; /* large cards */ --r-4: 22px; /* hero panels */ --r-pill: 999px; --r-orb: 50%; /* ============== ELEVATION — luminance, not weight ========= Aether shadows are about glow, not gravity. Stack a soft dark drop with a small inner highlight to make surfaces read as back-lit panes rather than floating cards. */ --shadow-pane: 0 1px 0 color-mix(in oklch, var(--ink-100) 6%, transparent) inset, 0 24px 60px -28px oklch(0 0 0 / 0.55), 0 8px 16px -10px oklch(0 0 0 / 0.4); --shadow-card: 0 1px 0 color-mix(in oklch, var(--ink-100) 4%, transparent) inset, 0 10px 30px -16px oklch(0 0 0 / 0.5); --shadow-soft: 0 6px 18px -10px oklch(0 0 0 / 0.45); /* glow halos — used for the "back-lit" hero treatment */ --glow-aether: 0 0 0 1px color-mix(in oklch, var(--aether-500) 35%, transparent), 0 0 24px -2px color-mix(in oklch, var(--aether-500) 55%, transparent), 0 0 60px -8px color-mix(in oklch, var(--aether-500) 40%, transparent); --glow-ember: 0 0 0 1px color-mix(in oklch, var(--ember-500) 30%, transparent), 0 0 24px -2px color-mix(in oklch, var(--ember-500) 55%, transparent), 0 0 60px -8px color-mix(in oklch, var(--ember-500) 35%, transparent); --glow-sigil: 0 0 0 1px color-mix(in oklch, var(--sigil-500) 30%, transparent), 0 0 24px -2px color-mix(in oklch, var(--sigil-500) 55%, transparent), 0 0 60px -8px color-mix(in oklch, var(--sigil-500) 35%, transparent); --glow-phosphor: 0 0 0 1px color-mix(in oklch, var(--phosphor-500) 35%, transparent), 0 0 24px -2px color-mix(in oklch, var(--phosphor-500) 60%, transparent), 0 0 80px -10px color-mix(in oklch, var(--phosphor-500) 45%, transparent); /* ============== MOTION ==================================== */ --ease-haunt: cubic-bezier(0.32, 0.72, 0.24, 1); /* slow exit, organic */ --ease-snap: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-drift: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* breathing */ --dur-fast: 140ms; --dur-mid: 280ms; --dur-slow: 520ms; --dur-breath: 4200ms; } /* ============== Light/Paper mode opt-in ===================== Apply `.paper` to a subtree for light-mode "manuscript" look. The portfolio uses dark-default; the Lab tends to flip to paper for the playful surfaces. */ .paper { --bg: var(--paper-100); --bg-raised: var(--paper-50); --bg-elevated: #fff; --surface: var(--paper-200); --hairline: color-mix(in oklch, var(--paper-400) 60%, transparent); --hairline-strong: var(--paper-400); --fg: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--paper-500); --fg-inv: var(--paper-50); --link: var(--aether-700); --link-hover: var(--aether-800); --shadow-pane: 0 1px 0 #fff inset, 0 24px 60px -34px oklch(0.2 0.04 280 / 0.25), 0 8px 16px -10px oklch(0.2 0.04 280 / 0.12); --shadow-card: 0 1px 0 #fff inset, 0 10px 30px -20px oklch(0.2 0.04 280 / 0.18); } /* ============== Reset-y base ============================== */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--leading-body); font-feature-settings: "ss01", "ss02", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============== Semantic type =========================== */ .display, h1.display { font-family: var(--font-display); font-weight: 400; font-size: var(--t-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-feature-settings: "ss01", "dlig"; text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0; text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); margin: 0; text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-h3); line-height: var(--leading-snug); margin: 0; } h4, .h4 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-h4); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); margin: 0; } h5, .h5 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-h5); line-height: var(--leading-snug); margin: 0; } h6, .h6 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-h6); line-height: var(--leading-snug); margin: 0; } p, .p { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--leading-body); color: var(--fg-2); margin: 0; text-wrap: pretty; } .lead { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--t-lead); line-height: var(--leading-loose); color: var(--fg-2); } .eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); font-weight: 500; } .eyebrow .sig { /* leading sigil glyph */ color: var(--accent); margin-right: 0.5em; } .small, small { font-size: var(--t-small); color: var(--fg-3); } code, kbd, .mono { font-family: var(--font-mono); font-size: 0.925em; font-feature-settings: "ss02", "zero"; } code { padding: 0.1em 0.4em; background: color-mix(in oklch, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent); border-radius: var(--r-1); color: var(--accent-soft); } .paper code { color: var(--accent-deep); background: color-mix(in oklch, var(--accent) 12%, transparent); } a { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--link) 35%, transparent); text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-snap), text-decoration-color var(--dur-fast) var(--ease-snap); } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } ::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); color: var(--fg); } /* ============== Aether utility primitives ================= These are not exhaustive components — they're the small surface treatments designs lean on. Stay sparing. */ /* "filament" — hairline that glows faintly */ .filament { background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 50%, transparent) 20%, color-mix(in oklch, var(--accent) 50%, transparent) 80%, transparent); height: 1px; } /* grain texture overlay — for hero panels */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* the "breath" — a slow scale + opacity loop, for glows */ @keyframes breath { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } .breathing { animation: breath var(--dur-breath) var(--ease-drift) infinite; } /* the "drift" — slow vertical bob for ghostly elements */ @keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .drifting { animation: drift 5200ms var(--ease-drift) infinite; } /* focus ring — phosphor-tinted on dark, sigil on light */ :where(button, a, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; border-radius: var(--r-1); }