/* ============================================================ core · world.css — token layer, phase 0 starter ------------------------------------------------------------ Copied verbatim from the design system's tokens/ on 2026-08-19: D:/DESIGN/core Design System/tokens/ Files, in the DS's own import order: fonts.css, colors.css, typography.css, spacing.css, effects.css Source of truth is still D:/DESIGN — re-read SKILL.md / readme / tokens there before building. Resets, base layouts and component CSS were deliberately NOT copied: layout is this world's own job. Google Fonts @import lines were removed (rule: fonts are self-hosted, see docs/04-world-contract.md §fonts). The families each token file expected are listed right where the import used to be. ============================================================ */ /* ---------- tokens/fonts.css ---------- */ /* fonts.css — webfont sources. Pixelify Sans + VT323 + Tinos pulled from Google Fonts. MS Sans Serif is declared via @font-face with local()-only sources: machines that have it installed (older Windows) will use it; everywhere else the browser silently falls through to the next family in --font-ui-sans (Tahoma / Segoe UI / system-ui). If you want to ship MS Sans Serif as a webfont, drop `ms-sans-serif.woff2` into `assets/fonts/` and add a url() line to the src list. */ /* [phase-0] Google Fonts import removed. Self-host these families (see docs/04-world-contract.md §fonts): Pixelify Sans, VT323, Tinos */ @font-face { font-family: 'MS Sans Serif'; src: local('MS Sans Serif'), local('MSSansSerif'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- tokens/colors.css ---------- */ /* colors.css — the core palette. COOL Y2K MILLENNIUM substrate: - bondi: iMac/MSN/XP-era hero blue - chrome: brushed silver - frost: icy paper substrate - tile: deeper aquatic blue (kept; pairs with bondi) - bubblegum: Y2K iconic pink (the "Lisa Frank" accent) Plus warm scales kept for accent use only: - sodium: backrooms yellow - peach/rose: dream halo */ :root { /* ── Bondi (Y2K hero blue) ─────────────────────────────── */ --bondi-50: #e0f4fb; --bondi-100: #bce8f6; --bondi-200: #8ddaf0; --bondi-300: #5fc8ea; --bondi-400: #2eb2e0; --bondi-500: #009de0; /* core Bondi — iMac blue */ --bondi-600: #0083bd; --bondi-700: #006a99; --bondi-800: #004d70; --bondi-900: #003855; /* ── Chrome (millennial silver / brushed metal) ───────── */ --chrome-50: #f0f4f8; --chrome-100: #dde4ec; --chrome-200: #c8d2dd; --chrome-300: #b4c0cc; --chrome-400: #97a4b3; --chrome-500: #8895a3; --chrome-600: #6c7886; --chrome-700: #4a5663; --chrome-800: #2d3744; --chrome-900: #1d2733; /* ── Frost (icy paper substrate) ──────────────────────── */ --frost-50: #f5fafd; --frost-100: #eaf4f8; --frost-200: #d8e7ef; --frost-300: #bcd3df; --frost-400: #95b3c4; /* ── Tile (chlorine pool blue — deeper aquatic) ───────── */ --tile-50: #eef5f8; --tile-100: #d3e6ed; --tile-200: #b1d4df; --tile-300: #8fc0d2; --tile-400: #6aa9bf; --tile-500: #4a8fa8; --tile-600: #356f87; --tile-700: #244f63; --tile-800: #163546; --tile-900: #0c2230; /* ── Bubblegum (Y2K pink — Lisa Frank energy) ─────────── */ --bubblegum-200: #ffd6e8; --bubblegum-300: #ffafd0; --bubblegum-400: #ff92bf; --bubblegum-500: #ff7eb6; --bubblegum-700: #c84f8e; /* ── Sodium (warm yellow — demoted to accent only) ────── */ --sodium-50: #fbf3d8; --sodium-100: #f5e4a8; --sodium-200: #efd57e; --sodium-300: #e8c761; --sodium-400: #dcb13f; --sodium-500: #d4a93a; --sodium-600: #b88a23; --sodium-700: #8a6b1e; --sodium-800: #5c4815; --sodium-900: #3d2e0c; /* ── Dream (peach/rose halo — small accent) ──────────── */ --peach-100: #fce5d8; --peach-200: #f7cdb8; --peach-300: #f4b8a0; --peach-400: #ee9b7d; --peach-500: #e88a6e; --rose-200: #f7c6d2; --rose-300: #f0a4b8; --rose-400: #e57f9b; /* ── Paper / ink (the substrate) ──────────────────────── */ --paper: var(--frost-100); --paper-stained: var(--frost-200); --paper-grout: var(--frost-300); --paper-fold: var(--frost-400); --ink: #0c1a26; /* deep cool ink */ --ink-soft: #1a2f42; --ink-muted: #4a5e72; --ink-faint: #7a8c9e; /* ── Y2K neon (rainbow text + visited links) ──────────── */ --neon-magenta: #ff2bbb; --neon-cyan: #00e8ff; --neon-lime: #c8ff2b; --neon-orange: #ff6f1f; --neon-violet: #9b4bff; /* ── Semantic aliases ────────────────────────────────── */ --text-body: var(--ink); --text-muted: var(--ink-muted); --text-faint: var(--ink-faint); --text-link: var(--bondi-700); --text-link-hover: var(--bondi-500); --text-invert: var(--paper); --text-warn: var(--bubblegum-500); --surface-page: var(--paper); --surface-card: var(--frost-50); --surface-window: var(--bondi-50); --surface-sunk: var(--chrome-100); --surface-pool: var(--bondi-100); --surface-pool-deep: var(--bondi-500); --titlebar-bg: var(--bondi-500); /* iMac/XP title-bar blue */ --titlebar-fg: #ffffff; --titlebar-bg-inactive: var(--chrome-300); --line: var(--ink); --line-soft: var(--ink-muted); --bevel-hi: var(--frost-50); --bevel-lo: var(--chrome-500); --accent-glow: var(--bondi-300); --accent-link-visited: var(--bubblegum-500); --select-bg: var(--bondi-500); --select-fg: #ffffff; } /* ---------- tokens/typography.css ---------- */ /* typography.css — font families + scale. The system layers three voices on purpose: - pixel display (Pixelify Sans) for headings and oversized statements - serif body (Tinos / Times) for reading - system sans for chrome (window titles, buttons, captions) This mismatch IS the design. Don't unify them. */ :root { /* ── Families ──────────────────────────────────────────────── */ --font-pixel-display: "Pixelify Sans", "VT323", "Courier New", monospace; --font-pixel-mono: "VT323", "Courier New", monospace; --font-body-serif: "Tinos", "Times New Roman", "Times", "Songti SC", serif; --font-ui-sans: -apple-system, BlinkMacSystemFont, "MS Sans Serif", "Tahoma", "Segoe UI", system-ui, sans-serif; /* ── Size scale (intentionally extreme) ────────────────────── */ --text-xxs: 10px; /* window chrome captions */ --text-xs: 11px; /* system UI labels */ --text-sm: 13px; --text-base: 15px; /* slightly smaller body for that "old web" feel */ --text-md: 18px; --text-lg: 24px; --text-xl: 36px; --text-2xl: 56px; --text-3xl: 88px; --text-mega: 144px; /* hero display */ /* ── Weights ───────────────────────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; /* ── Line heights — tight for pixel, generous for serif ────── */ --leading-pixel: 1; --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.55; --leading-loose: 1.8; /* ── Letter spacing ────────────────────────────────────────── */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-mega: 0.18em; /* spaced-out display headers */ /* ── Semantic ──────────────────────────────────────────────── */ --text-hero: var(--text-mega); --text-h1: var(--text-3xl); --text-h2: var(--text-2xl); --text-h3: var(--text-xl); --text-h4: var(--text-lg); --text-caption: var(--text-xs); } /* ---------- tokens/spacing.css ---------- */ /* spacing.css — 4px-grid scale + one "tile" unit that doubles as a layout grid and a literal background-tile size. */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* tile grid — used for background patterns AND for layout columns */ --tile-size: 32px; --grout-size: 2px; /* radii — mostly sharp (Y2K). One soft for "pebble" pills. */ --radius-none: 0; --radius-soft: 2px; --radius-pebble: 10px; --radius-pill: 999px; --radius-blob: 50%; /* borders */ --border-w: 1px; --border-w-thick: 2px; --border-w-window: 1px; } /* ---------- tokens/effects.css ---------- */ /* effects.css — shadows, bevels, glows, grain. The whole system is built on the contrast between crisp Y2K bevels and soft dreamcore halos. */ :root { /* ── Y2K bevels (sharp, 1px, no blur) ──────────────────────── */ --bevel-out: inset -1px -1px 0 var(--bevel-lo), inset 1px 1px 0 var(--bevel-hi); --bevel-in: inset 1px 1px 0 var(--bevel-lo), inset -1px -1px 0 var(--bevel-hi); --bevel-out-strong: inset -2px -2px 0 var(--bevel-lo), inset 2px 2px 0 var(--bevel-hi); /* ── Drop shadows (offset, no blur — like a clipping mask) ─── */ --shadow-card: 2px 2px 0 var(--ink); --shadow-window: 3px 3px 0 var(--ink), 6px 6px 0 rgba(26,20,12,0.25); --shadow-window-lg: 4px 4px 0 var(--ink), 10px 10px 0 rgba(26,20,12,0.3); --shadow-press: 1px 1px 0 var(--ink); /* ── Dreamcore glows (soft, halo'd, blurred) ───────────────── */ --glow-bondi: 0 0 24px var(--bondi-300), 0 0 48px rgba(95,200,234,0.5); --glow-chrome: 0 0 16px var(--chrome-100), 0 0 36px rgba(196,208,221,0.5); --glow-pool: 0 0 32px rgba(74,143,168,0.6); --glow-peach: 0 0 24px var(--peach-300), 0 0 48px rgba(244,184,160,0.45); --glow-rose: 0 0 24px var(--rose-300), 0 0 60px rgba(240,164,184,0.4); --glow-bubblegum: 0 0 24px var(--bubblegum-300), 0 0 60px rgba(255,126,182,0.4); --glow-text-overexposed: 0 0 8px var(--frost-50), 0 0 16px rgba(188,232,246,0.85), 0 0 28px rgba(95,200,234,0.6); /* ── Pool inner shadow (water depth) ───────────────────────── */ --shadow-pool-inner: inset 0 12px 32px rgba(36,79,99,0.5), inset 0 2px 0 rgba(26,20,12,0.3); /* ── Backgrounds (declared assets) ─────────────────────────── */ --bg-tile-pattern: url("ds/tile.svg"); --bg-grain-pattern: url("ds/grain.svg"); --bg-caustic-pattern: url("ds/caustic.svg"); /* ── Filters ───────────────────────────────────────────────── */ --filter-overexposed: saturate(0.85) brightness(1.08) contrast(0.95); /* @kind other */ --filter-jpeg: contrast(1.05) saturate(1.1); /* @kind other */ --filter-vhs: contrast(0.9) saturate(1.2) brightness(1.05); /* @kind other */ --filter-soft-dream: blur(0.4px) saturate(0.9) brightness(1.05); /* @kind other */ /* ── Motion ────────────────────────────────────────────────── */ --ease-step-2: steps(2, end); /* @kind other */ --ease-step-4: steps(4, end); /* @kind other */ --ease-step-8: steps(8, end); /* @kind other */ --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1); /* @kind other */ --ease-dream: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --dur-instant: 60ms; /* @kind other */ --dur-snap: 120ms; /* @kind other */ --dur-soft: 500ms; /* @kind other */ --dur-drift: 2400ms; /* @kind other */ --dur-marquee: 18s; /* @kind other */ /* ── Cursor (Y2K crosshair) ────────────────────────────────── */ --cursor-default: auto; /* @kind other */ --cursor-link: pointer; /* @kind other */ } /* ============================================================ phase-0 stage — REPLACE in phase 1 The shell morphs the console monitor into .yo-stage. Keep the stage exactly one viewport (position: fixed; inset: 0) and let the world scroll inside it if it scrolls at all. ============================================================ */ html { background: var(--surface-page); } .yo-stage { position: fixed; inset: 0; overflow: hidden; background: var(--surface-page); color: var(--text-body); font-family: var(--font-ui-sans); } /* the return key in this world's material — this is only the neutral default */ .yo-return { color: var(--text-body); }