/* ───────────────────────────────────────────── yapp.page · Design System v1.0 · tokens Drop in as the FIRST stylesheet. ───────────────────────────────────────────── */ /* ── Self-hosted Geist (latin + latin-ext) ── Hosted from /fonts/ to avoid a third-country (US) data transfer to Google Fonts. Files mirror the woff2 Google serves; SIL OFL license. The variable axis covers 400/500/600, so one file per subset is enough. */ @font-face{ font-family:'Geist'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/geist-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Geist'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/geist-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/geist-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Geist Mono'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Metric-matched fallbacks ── Without metric overrides the swap from system fallback to Geist visibly shifts text (FOUT) — most noticeable on the nav logo. These wrap local Arial / Menlo in a face that matches Geist's metrics, so the fallback occupies the exact same pixels Geist will. */ @font-face{ font-family:'Geist Fallback'; src:local('Arial'); ascent-override:93.94%; descent-override:23.79%; line-gap-override:0%; size-adjust:102.66%; } @font-face{ font-family:'Geist Mono Fallback'; src:local('Menlo'), local('Courier New'); ascent-override:81.55%; descent-override:21.51%; line-gap-override:0%; size-adjust:99.06%; } :root{ /* Brand · Indigo */ --indigo-50:#EEF0FF; --indigo-100:#E0E4FF; --indigo-200:#C7CEFF; --indigo-300:#A5AFFF; --indigo-400:#7B86F5; --indigo-500:#4F46E5; --indigo-600:#4338CA; --indigo-700:#3730A3; --indigo-800:#2E2A7C; --indigo-900:#1E1B4B; /* Ink · warm slate neutrals */ --ink-0:#FFFFFF; --ink-50:#FAFAF7; --ink-100:#F4F4EE; --ink-150:#ECECE4; --ink-200:#E3E3D9; --ink-300:#C9C9BC; --ink-400:#9A9A8B; --ink-500:#6E6E63; --ink-600:#4A4A43; --ink-700:#2E2E29; --ink-800:#1B1B18; --ink-900:#0F0F0D; /* Status */ --green-50:#ECFDF5; --green-100:#D1FAE5; --green-500:#10B981; --green-600:#059669; --amber-50:#FFFBEB; --amber-100:#FEF3C7; --amber-500:#F59E0B; --amber-600:#D97706; --red-50:#FEF2F2; --red-100:#FECACA; --red-500:#EF4444; --red-600:#DC2626; /* Semantic */ --bg:var(--ink-50); --surface:var(--ink-0); --surface-sunken:var(--ink-100); --hairline:var(--ink-200); --hairline-soft:var(--ink-150); --text:var(--ink-900); --text-2:var(--ink-600); --text-3:var(--ink-500); --text-4:var(--ink-400); --accent:var(--indigo-500); --accent-hover:var(--indigo-600); /* Legacy aliases — keep the old CSS variable names working so nothing in inline-style attributes breaks. */ --line:var(--hairline); --line-strong:var(--ink-300); --surface-2:var(--ink-100); --text-dim:var(--ink-700); --text-mute:var(--ink-500); --text-faint:var(--ink-400); --text-ghost:var(--ink-400); --accent-soft:var(--indigo-400); --ok:var(--green-500); --warn:var(--amber-500); --err:var(--red-500); /* Type */ --font-sans:'Geist','Geist Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-mono:'Geist Mono','Geist Mono Fallback','SF Mono',Menlo,Monaco,monospace; /* Radius */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-full:999px; /* Spacing */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; /* Elevation */ --shadow-1:0 1px 2px rgba(15,15,13,.04); --shadow-2:0 1px 2px rgba(15,15,13,.04), 0 2px 8px rgba(15,15,13,.04); --shadow-3:0 1px 2px rgba(15,15,13,.04), 0 8px 24px rgba(15,15,13,.06); --shadow-pop:0 1px 2px rgba(15,15,13,.04), 0 12px 32px rgba(30,27,75,.08); /* Motion */ --ease:cubic-bezier(.2,.7,.2,1); --dur-fast:120ms; --dur:180ms; --dur-slow:280ms; }