/* ═══════════════════════════════════════════════════════════ Portfolio · Design System · Tokens ─────────────────────────────────────────────────────────── Three tiers (Geist-style): 1. Raw — hex constants. Source of truth. Two scale ramps: neutral + persimmon. 2. Semantic — meaning-based aliases that point at raw. 3. Scale — type / space / radius / motion / elevation. ─────────────────────────────────────────────────────────── Components MUST reference semantic + scale tokens only. Never hardcode hex / clamp() / ms values inside components. ═══════════════════════════════════════════════════════════ */ :root { /* ─── 1 · RAW · NEUTRAL RAMP (brightened paper tone) ────── */ /* Light end (50–300) lifted ~3% so surfaces read "fresh */ /* paper" instead of "dingy beige". Subtle warmth preserved */ /* but undertone closer to neutral. Dark end unchanged for */ /* text contrast. */ --neutral-0: #FFFFFF; --neutral-50: #FDFDFC; --neutral-100: #F9F8F6; --neutral-200: #F1F0EC; --neutral-300: #E5E3DF; --neutral-350: #B0ABA7; --neutral-400: #898683; --neutral-500: #807D7A; --neutral-600: #757370; --neutral-700: #6A6764; --neutral-800: #1A1816; --neutral-900: #131211; --neutral-950: #0E0B09; /* ─── 1 · RAW · PERSIMMON RAMP (brand accent) ───────────── */ /* 500 / 600 / 700 are brand-validated anchors (unchanged). */ /* Light tints (50/100/200) re-hued to align with brand hue */ /* (~6°) so washes feel related, not pink-against-cool-gray. */ --brand-young-50: #FBE0D9; --brand-young-100: #F2CABF; --brand-young-200: #D6B6AE; --brand-young-300: #C97A6B; --brand-young-400: #C0584A; --brand-young-500: #B8392C; --brand-young-600: #9C2D24; --brand-young-700: #7C2818; --brand-young-800: #5A1C11; --brand-young-900: #3B130A; /* ─── 1 · RAW · CONDOR RAMP (client brand) ──────────────── */ /* Full blue scale, same shape as persimmon. 500 = point colour */ /* (#006BAC, AA on neutral-50 at ~5.4:1); 50 = highlight wash. */ --brand-condor-50: #D9E9F3; --brand-condor-100: #BFD9EC; --brand-condor-200: #93C0DD; --brand-condor-300: #5B9FC9; --brand-condor-400: #2680B4; --brand-condor-500: #006BAC; --brand-condor-600: #005C95; --brand-condor-700: #004B7A; --brand-condor-800: #003A5E; --brand-condor-900: #002740; /* ─── 1 · RAW · STATUS RAMPS ──────────────────────────────── Tuned to sit with the palette and stay distinct from the two brand reds/blues: success = balanced green; info = INDIGO blue (cooler than condor's cyan-blue #006BAC); error = brighter PURE red (hue ~0°, clear of persimmon's brick #B8392C). 600 = AA text on the off-white surface. */ --success-50: #E6F4EC; --success-100: #C6E7D4; --success-200: #9BD4B4; --success-300: #66BB8C; --success-400: #3DA06C; --success-500: #2E8B57; --success-600: #237046; --success-700: #1B5838; --success-800: #154329; --success-900: #0E2C1B; --info-50: #E8EDFB; --info-100: #CCD7F6; --info-200: #A3B7EE; --info-300: #708FE2; --info-400: #4A6CD6; --info-500: #3457C4; --info-600: #2A47A6; --info-700: #213885; --info-800: #1A2C66; --info-900: #121E45; --error-50: #FCE8E8; --error-100: #F8CACA; --error-200: #F0A0A0; --error-300: #E66B6B; --error-400: #DC4444; --error-500: #D12B2B; --error-600: #B21F1F; --error-700: #8E1818; --error-800: #6B1212; --error-900: #470B0B; /* ─── 2 · SEMANTIC ALIASES ──────────────────────────────── */ /* Surfaces */ --color-bg: var(--neutral-50); --color-bg-surface: var(--neutral-100); --color-bg-cream: var(--neutral-200); --color-bg-inverse: var(--neutral-950); /* Foreground */ --color-fg: var(--neutral-900); --color-fg-muted: var(--neutral-700); --color-fg-subtle: var(--neutral-600); --color-fg-warm: var(--neutral-400); --color-fg-on-inverse: var(--neutral-200); --color-fg-on-inverse-muted: var(--neutral-350); /* Lines */ --color-line: var(--neutral-300); --color-line-strong: var(--neutral-500); --color-line-inverse: var(--neutral-800); /* Brand accents (semantic, per brand) — each maps a raw ramp into point / deep / hover / soft / muted roles. A theme just promotes one brand into the active --color-accent-* below. */ /* young — personal brand (persimmon) */ --color-young-point: var(--brand-young-500); --color-young-deep: var(--brand-young-700); --color-young-hover: var(--brand-young-600); --color-young-soft: var(--brand-young-50); --color-young-muted: var(--brand-young-200); /* condor — client brand */ --color-condor-point: var(--brand-condor-500); --color-condor-deep: var(--brand-condor-800); --color-condor-hover: var(--brand-condor-600); --color-condor-soft: var(--brand-condor-50); --color-condor-muted: var(--brand-condor-200); /* Active accent — set by the page theme. Default = young. Point colours pass WCAG AA as text on neutral-50 (persimmon 5.6:1, condor 5.4:1). */ --color-accent: var(--color-young-point); --color-accent-deep: var(--color-young-deep); --color-accent-soft: var(--color-young-soft); --color-accent-muted: var(--color-young-muted); --color-accent-hover: var(--color-young-hover); --color-accent-on: var(--neutral-50); --color-accent-text: var(--color-young-point); /* Button — NEUTRAL by design. Common controls (buttons, inputs) stay neutral across every theme; themes only re-point the accent for point text, highlight, and small visuals. These live at :root and are intentionally NOT overridden by [data-theme] blocks. */ --color-button-fill: var(--neutral-900); --color-button-fill-hover: var(--neutral-950); --color-button-label: var(--neutral-50); --color-button-border: var(--color-line-strong); --color-button-border-hover: var(--neutral-900); /* Feedback (semantic) — theme-independent. Each status exposes a text/icon colour (AA on surface), a soft surface, and a border. */ --color-success: var(--success-600); --color-success-surface: var(--success-50); --color-success-border: var(--success-200); --color-info: var(--info-600); --color-info-surface: var(--info-50); --color-info-border: var(--info-200); --color-error: var(--error-600); --color-error-surface: var(--error-50); --color-error-border: var(--error-200); /* ─── 2b · LEGACY ALIASES ─────────────────────────────────── Short names referenced widely across existing CSS. Kept as aliases so nothing breaks. New code should use --color-*. ─────────────────────────────────────────────────────────── */ --bg: var(--color-bg); --ink: var(--color-fg); --surface: var(--color-bg-surface); --border: var(--color-line); --cream: var(--color-bg-cream); --muted: var(--color-fg-muted); --subtle: var(--color-fg-subtle); --muted-warm: var(--color-fg-warm); --dark: var(--color-bg-inverse); --dark-border: var(--color-line-inverse); --border-strong: var(--color-line-strong); --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: var(--color-accent-soft); --accent-hover: var(--color-accent-hover); --accent-text: var(--color-accent-text); /* ─── 3 · SCALE — TYPE ──────────────────────────────────── */ /* Sizes (existing fluid clamps, named into the scale) */ --type-display: clamp(2.25rem, 5vw, 4.5rem); --type-h1: clamp(1.875rem, 3.8vw, 2.875rem); --type-h2: clamp(1.5rem, 2.8vw, 2.25rem); --type-h3: clamp(1.375rem, 2.4vw, 1.75rem); --type-h4: clamp(1.1875rem, 1.3vw, 1.375rem); --type-body: 1rem; --type-caption: 0.875rem; --type-small: 0.8125rem; --type-micro: 0.6875rem; /* Line heights */ --leading-tight: 1.04; --leading-snug: 1.2; --leading-base: 1.55; --leading-loose: 1.65; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Uppercase section labels ("EXPERIENCE", "EDUCATION"). Sits between wide and eyebrow: enough to open up caps at body size without the airiness eyebrow needs at caption size. Already the de facto value on the landing page, where the Experience / Education / Community column headers hardcode tracking-[0.14em]. */ --tracking-label: 0.14em; --tracking-eyebrow: 0.22em; /* ─── 3 · SCALE — SPACE (4-base ladder) ─────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* ─── 3 · SCALE — RADIUS ────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ─── 3 · SCALE — MOTION ────────────────────────────────── */ --duration-instant: 100ms; --duration-short: 200ms; --duration-medium: 400ms; --duration-long: 700ms; --duration-x-long: 1100ms; --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-emphasize: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-emphasize-alt: cubic-bezier(0.22, 1, 0.36, 1); --ease-enter: cubic-bezier(0, 0, 0.3, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ─── 3 · SCALE — ELEVATION ─────────────────────────────── */ --shadow-card: 0 16px 40px -16px rgba(20, 17, 15, 0.10), 0 4px 12px -6px rgba(20, 17, 15, 0.06), inset 0 0 0 1px rgba(20, 17, 15, 0.03); --shadow-floating: 0 24px 60px -15px rgba(17, 7, 6, 0.18), 0 6px 18px -8px rgba(17, 7, 6, 0.08); /* Neutral — shadows never carry the brand point colour. */ --shadow-button: 0 8px 28px -8px rgba(20, 17, 15, 0.22); /* ─── 3 · SCALE — LAYOUT ────────────────────────────────── */ --container-max: 80rem; /* 1280px — matches existing max-w-7xl */ } /* ═══════════════════════════════════════════════════════════ 4 · THEMES — per-case brand. Opt in with . Re-points the accent family. The short legacy aliases (--accent etc.) MUST be re-declared at this scope: CSS substitutes their var() at the declaration site, so :root's aliases stay frozen to persimmon otherwise. ═══════════════════════════════════════════════════════════ */ [data-theme="young"] { --color-accent: var(--color-young-point); --color-accent-deep: var(--color-young-deep); --color-accent-hover: var(--color-young-hover); --color-accent-soft: var(--color-young-soft); --color-accent-muted: var(--color-young-muted); --color-accent-text: var(--color-young-point); --color-accent-on: var(--neutral-50); --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: var(--color-accent-soft); --accent-hover: var(--color-accent-hover); --accent-text: var(--color-accent-text); } [data-theme="condor"] { --color-accent: var(--color-condor-point); --color-accent-deep: var(--color-condor-deep); --color-accent-hover: var(--color-condor-hover); --color-accent-soft: var(--color-condor-soft); --color-accent-muted: var(--color-condor-muted); --color-accent-text: var(--color-condor-point); --color-accent-on: var(--neutral-50); --accent: var(--color-accent); --accent-deep: var(--color-accent-deep); --accent-soft: var(--color-accent-soft); --accent-hover: var(--color-accent-hover); --accent-text: var(--color-accent-text); }