/* ══════════════════════════════════════════════════════════════════ INDEX of TASTE · DESIGN TOKENS Extracted from styles.css, profile.css, app.jsx (real values, not invented). Decimal/hex/rem values are the ones currently shipping on indexoftaste.com. ══════════════════════════════════════════════════════════════════ */ :root { /* ── INK / TEXT COLORS ─────────────────────────────────────────── */ /* Used across body copy, kicker, meta, labels. Scale ordered from densest to lightest. */ --color-ink-900: #1a1a1a; /* primary text (body, headline, title, kicker high-emphasis) */ --color-ink-700: #444; /* secondary text (subtitle, meta-value, credit) */ --color-ink-600: #4A4845; /* one-off label color in figure-preview titlebar */ --color-ink-500: #666; /* tertiary text (body columns inside profile) */ --color-ink-400: #999; /* muted / meta-label / kicker low-emphasis */ --color-ink-on-image: #fff; /* white text overlaid on dark photo (s6) */ --color-ink-on-image-soft: rgba(255, 255, 255, 0.85); /* same, dimmed */ --color-ink-on-image-strong: rgba(255, 255, 255, 0.95); /* ── SURFACE / PAPER ────────────────────────────────────────────── */ /* Editorial cream tones. Currently three near-identical creams ship in parallel — see design-system.md. */ --color-paper-100: #FFFFFF; /* pure white (figure-preview body) */ --color-paper-200: #FFFBEB; /* profile shell + profile sections background */ --color-paper-300: #F4F0E8; /* modal background + legacy homepage default */ --color-paper-400: #eddbbf; /* current homepage background (TWEAK_DEFAULTS) */ --color-paper-500: #E8E2D2; /* image-placeholder background (s2/s5 portrait fallback) */ /* ── CHROME (macOS preview popup) ──────────────────────────────── */ --color-chrome-200: #E8E6E3; /* titlebar gradient top */ --color-chrome-300: #DAD7D3; /* titlebar gradient bottom */ /* ── ACCENT DOTS (traffic lights) ──────────────────────────────── */ --color-accent-red: #FF5F57; /* close button */ --color-accent-amber: #FEBC2E; /* minimize button */ --color-accent-green: #28C840; /* maximize button */ /* ── BORDERS / DIVIDERS ────────────────────────────────────────── */ --color-border-faint: rgba(26, 26, 26, 0.07); /* nav border-bottom, footer border-top in profile */ --color-border-soft: rgba(26, 26, 26, 0.12); /* colophon border-top */ --color-border-chrome: rgba(0, 0, 0, 0.12); /* macOS popup titlebar bottom */ /* ── OVERLAYS / SCRIM ──────────────────────────────────────────── */ --color-scrim-modal: rgba(20, 18, 14, 0.4); /* modal backdrop */ --color-scrim-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%); --color-scrollbar-thumb: rgba(0, 0, 0, 0.32); /* macOS-style scrollbar thumb in preview */ /* ── TYPOGRAPHY · FAMILIES ─────────────────────────────────────── */ --font-display: 'Erotique Alternate', 'DM Serif Display', serif; /* wordmark / headline (note: currently rendered as an SVG asset on home, see design-system.md) */ --font-display-fallback: 'DM Serif Display', serif; /* modal name/blurb/role */ --font-body: 'Inter', -apple-system, sans-serif; /* homepage body / modal-why */ --font-mono: 'JetBrains Mono', monospace; /* eyebrow / colophon / figure-caption / modal-meta */ --font-system: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; /* used inside profile pages */ /* ── TYPOGRAPHY · WEIGHTS ──────────────────────────────────────── */ --font-weight-light: 300; /* modal-close glyph */ --font-weight-regular: 400; /* body, DM Serif default */ --font-weight-medium: 500; /* meta-value, s4-kicker, Inter medium */ --font-weight-semibold: 600; /* s4-intro, s5-quote, s5-credit */ --font-weight-bold: 700; /* headline, s5-credit-num */ --font-weight-heavy: 800; /* ed-title, s4-title */ /* ── TYPOGRAPHY · SCALE ────────────────────────────────────────── */ /* Sizes are listed exactly as they appear in code. Mixed units (px / rem / em / clamp) — see design-system.md. */ --text-3xs: 6px; /* figure-preview title */ --text-2xs: 9px; /* ed-nav, ed-footer button, figure-caption */ --text-xs: 10px; /* eyebrow, colophon, modal-meta, modal-label */ --text-sm-em: 0.65em; /* s5-credit number (relative to parent) */ --text-sm-1: 0.68rem; /* legacy s5-credit (pre-bump) */ --text-sm-2: 0.7rem; /* ed-kicker */ --text-sm-3: 0.72rem; /* s4-kicker */ --text-sm-4: 0.78rem; /* ed-columns body, ed-meta, s2/s3 body */ --text-base: 0.82rem; /* ed-subtitle, s5-credit current */ --text-md-1: 0.9rem; /* s4-credits */ --text-md-2: 1.1rem; /* s4-intro */ --text-lg-clamp: clamp(1.05rem, 1.25vw, 1.5rem); /* s5-quote */ --text-xl-clamp: clamp(1.4rem, 1.8vw, 2.2rem); /* s2-quote */ --text-2xl-clamp: clamp(2rem, 2.4vw, 3rem); /* s3-col--quote */ --text-3xl-clamp: clamp(2rem, 2.7vw, 3.6rem); /* ed-title */ --text-4xl-modal: 44px; /* modal-name */ --text-5xl-clamp: clamp(3rem, 4.4vw, 5rem); /* s4-title */ --text-6xl-clamp: clamp(56px, 8.4vw, 132px); /* headline (legacy text fallback) */ /* ── TYPOGRAPHY · LINE-HEIGHTS ─────────────────────────────────── */ --leading-flat: 1; --leading-tight: 1.05; --leading-snug: 1.18; --leading-comfortable: 1.32; --leading-relaxed: 1.4; --leading-loose: 1.6; --leading-prose: 1.75; /* multi-column body text */ /* ── TYPOGRAPHY · LETTER-SPACING ───────────────────────────────── */ --tracking-tightest: -0.02em; /* headline, s4-title */ --tracking-tighter: -0.015em; /* modal-name */ --tracking-tight: -0.005em; /* modal-blurb, s5-quote */ --tracking-normal: 0.01em; /* meta */ --tracking-relaxed: 0.02em; /* ed-title */ --tracking-wide: 0.1em; /* figure-caption */ --tracking-wider: 0.14em; /* colophon */ --tracking-widest: 0.18em; /* eyebrow, kicker, modal-meta, modal-label */ --tracking-widest-plus: 0.2em; /* ed-footer button */ --tracking-extra-wide: 0.22em; /* ed-nav-back */ /* ── SPACING · RELATIVE (vh / vw) ──────────────────────────────── */ /* Profile sections use viewport-relative spacing for magazine-page proportions. */ --space-vh-1: 1.2vh; --space-vh-2: 2vh; --space-vh-3: 2.2vh; --space-vh-4: 3vh; --space-vh-5: 3.2vh; --space-vh-6: 4vh; --space-vh-7: 4.5vh; --space-vh-8: 5vh; /* canonical inter-section gap */ --space-vh-9: 6vh; /* mobile inter-section gap */ --space-vh-10: 9vh; --space-vh-11: 10vh; --space-vw-1: 1.6vw; /* column-gap (.ed-columns) */ --space-vw-2: 2vw; /* outer left for images (s1, s4-left, s5-left) */ --space-vw-3: 3vw; /* inner gutter */ --space-vw-4: 3.5vw; --space-vw-5: 4.5vw; /* outer right for text/image sides */ --space-vw-6: 6vw; /* mobile horizontal padding */ --space-vw-7: 8.4vw; /* headline clamp midpoint */ /* ── SPACING · ABSOLUTE (px) ───────────────────────────────────── */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 14px; --space-6: 18px; --space-7: 22px; --space-8: 24px; --space-9: 28px; --space-10: 32px; --space-11: 40px; --space-12: 48px; --space-13: 56px; /* .page top padding desktop */ --space-14: 64px; /* .page horizontal padding desktop */ --space-15: 80px; /* .colophon margin-top */ --space-16: 96px; /* .masthead margin-bottom desktop */ --space-17: 132px; /* TWEAK_DEFAULTS spacing (gallery gap) */ /* ── BORDER RADIUS ─────────────────────────────────────────────── */ --radius-xs: 2px; /* figure-preview scrollbar thumb */ --radius-md: 6px; /* figure-preview popup card */ --radius-full: 50%; /* traffic light dots */ /* ── SHADOWS ───────────────────────────────────────────────────── */ /* Currently shipping in code — only the macOS-style preview card uses these. */ --shadow-popup: 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10); --shadow-traffic-light: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); /* ── MOTION ────────────────────────────────────────────────────── */ --duration-fast: 0.18s; /* figure-preview fade */ --duration-snap: 0.2s; /* modal-close opacity */ --duration-base: 0.25s; /* modal fade-in */ --duration-hover: 0.3s; /* figure-btn opacity */ --duration-spring: 0.35s; /* figure-btn lift, modal rise */ --duration-page: 0.4s; /* background transition */ --easing-standard: ease; --easing-spring: cubic-bezier(0.2, 0.7, 0.2, 1); /* ── BREAKPOINTS ───────────────────────────────────────────────── */ /* NOTE: two breakpoints currently coexist — see design-system.md. */ --bp-mobile-styles: 900px; /* defined in styles.css */ --bp-mobile-profile: 860px; /* defined in profile.css */ /* ── ASPECT RATIOS ─────────────────────────────────────────────── */ --aspect-portrait-thumb: 3 / 4; --aspect-portrait-mobile: 4 / 5; --aspect-landscape-wide: 16 / 9; /* ── Z-INDEX ───────────────────────────────────────────────────── */ --z-figure-preview: 50; --z-modal: 1000; }