/* tokens.css β€” design source of truth for the Starport mockup-demo. All 9 ports inherit from here. Worker ports MUST NOT redefine these tokens; they MAY add port-scoped tokens under [data-port=""]. Body font: Geist (Vercel's neo-grotesque). Loaded via Google Fonts in index-live.html with `display=swap`. SF Pro Text resolves natively on macOS as the perceptual identical first-frame font; Geist takes over on swap with no visible reflow. */ /* External CDN assets (each imported in index-live.html ): - Phosphor Icons (regular + fill): @phosphor-icons/web@2.1.1 - Geist + Geist Mono: fonts.googleapis.com (display=swap) - Simple Icons (brand logos via cdn.simpleicons.org) - logo.dev (real brand logos via img.logo.dev?token=...) - Pravatar (real avatars, deterministic by seed) - Country flags: emoji (πŸ‡©πŸ‡ͺπŸ‡ΊπŸ‡Έ) β€” content, not functional icon. */ :root { /* ─── Surface stack ──────────────────────────────────────────────── */ --bg: #F7F8FA; --surface: #FFFFFE; --surface-2: #F1F3F6; --surface-elevated: #FFFFFF; --surface-overlay: rgba(255, 255, 255, 0.78); /* ─── Borders (3 tiers) ──────────────────────────────────────────── */ --border-subtle: #E8EAEE; --border: #D7DAE0; --border-strong: #A4ABB6; /* ─── Text (4 tiers) ─────────────────────────────────────────────── */ --text-primary: #0F1115; --text-secondary: #4B5260; --text-tertiary: #828998; --text-quaternary: #B0B6C1; /* metadata only β€” passes 3:1 against surface */ --text-on-accent: #FFFFFF; /* ─── Accent β€” earthy/orange brass per M-logo picker ─────────────── */ --accent: #E0571C; /* M-logo orange β€” operator-locked 2026-05-07 */ --accent-hover: #C04915; /* darker step for hover */ --accent-soft: #FAD9C7; /* tinted card border / strong tint background */ --accent-soft-2: #FDF1EA; /* tinted card background */ /* ─── Status hues + soft variants ────────────────────────────────── */ --success: #15803D; --success-soft: #DCFCE7; --success-fg: #059669; --warning: #B45309; --warning-soft: #FEF3C7; --critical: #B91C1C; --critical-soft: #FEE2E2; --danger: #DC2626; --danger-bg: #FEF2F2; --info: var(--accent); --info-soft: var(--accent-soft); /* ─── Peer / multiplayer ────────────────────────────────────────── */ --peer-1: var(--accent); --peer-2: var(--warning); --peer-3: var(--success); --peer-1-soft: var(--accent-soft); --peer-2-soft: var(--warning-soft); --peer-3-soft: var(--success-soft); --avatar-stack-border: var(--surface); /* ─── Misc surface overlays ─────────────────────────────────────── */ --card-overlay: rgba(255, 255, 255, 0.6); --divider: rgba(15, 17, 21, 0.06); --overlay-bg: rgba(15, 17, 21, 0.4); --tooltip-bg: var(--text-primary); --tooltip-fg: #FFFFFF; --toast-bg: var(--surface-elevated); --toast-fg: var(--text-primary); --grid-line: rgba(15, 17, 21, 0.04); --hover: var(--surface-2); /* ─── Type ──────────────────────────────────────────────────────── */ /* Body: Geist via Google Fonts. Falls back to SF Pro Text (macOS native) then a system stack. NEVER Inter β€” operator-banned 2026-05-07. */ --font-sans: "Geist", -apple-system, "SF Pro Text", "SΓΆhne", "Untitled Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", "Fira Code", monospace; /* Type scale (px). 1.125 modular ratio above 14, denser ratio below. 13 is the operator-default body size. Ports inherit this. */ --fs-10: 10px; /* badge / micro-label only */ --fs-11: 11px; /* meta / kicker / overline */ --fs-12: 12px; /* secondary text, table cell */ --fs-13: 13px; /* body default */ --fs-14: 14px; /* body emphatic / list-item title */ --fs-15: 15px; /* lede / card title */ --fs-16: 16px; /* port hero subtitle / inline focal number */ --fs-18: 18px; /* section heading */ --fs-22: 22px; /* page H2 */ --fs-28: 28px; /* page H1 (full-mode) */ --fs-36: 36px; /* port hero greeting */ /* Line-height per usage. Display sizes get tight LH; body gets 1.5. */ --lh-display: 1.1; /* 28+ */ --lh-heading: 1.25; /* 18-22 */ --lh-body: 1.5; /* 13-16 */ --lh-tight: 1.4; /* dense rows / stream items */ /* Letter-spacing scale. Negative on display, neutral on body, positive on uppercase kickers. Workers MUST use these tokens, not raw em values. */ --tracking-display: -0.015em; /* 28+ */ --tracking-heading: -0.01em; /* 18-22 */ --tracking-body: 0; --tracking-mono: -0.005em; /* tabular numerals tighten */ --tracking-kicker: 0.06em; /* uppercase 11-12px overlines */ --tracking-kicker-lg: 0.14em; /* uppercase date stamps */ /* Font-weight scale β€” calm operator-tone. We do NOT use 700/800 anywhere. 600 is the heaviest weight in the system. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ─── Spacing ───────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ─── Radius ────────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* ─── Shadow (4 tiers) ──────────────────────────────────────────── */ /* Dual-layer: ambient sky + 1px ring. Light-mode shadows are subtle β€” chrome and ports rely on borders for definition; shadows for lift. */ --shadow-1: 0 1px 2px rgba(15, 17, 21, 0.04), 0 0 0 1px var(--border-subtle); --shadow-2: 0 2px 8px rgba(15, 17, 21, 0.05), 0 0 0 1px var(--border-subtle); --shadow-3: 0 8px 24px rgba(15, 17, 21, 0.08), 0 0 0 1px var(--border-subtle); --shadow-float: 0 16px 48px rgba(15, 17, 21, 0.12), 0 0 0 1px var(--border); /* Peek mode (tour, ephemeral floating cards) */ --peek-z-index: 1000; --peek-shadow: var(--shadow-3); --peek-bg: var(--surface-elevated); /* ─── Motion ────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* settling spring; use for ports */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; /* hover, focus-ring */ --dur-med: 200ms; /* state changes, list reorders */ --dur-slow: 280ms; /* port maximize, sidebar slide */ --theme-transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), fill 120ms var(--ease-out); } /* ─── Dark theme ───────────────────────────────────────────────────── */ /* Designed, not auto-derived. Surface stack rises from deep ink to lifted gunmetal. Borders + opacity carry hierarchy; shadows are heavily damped because shadows on dark surfaces only muddy the image. Accent shifts +1 brightness step to keep WCAG AA. */ :root[data-theme="dark"] { --bg: #0B0D11; --surface: #14171D; --surface-2: #1B1F27; --surface-elevated: #1F232C; --surface-overlay: rgba(31, 35, 44, 0.78); --border-subtle: #242832; --border: #313644; --border-strong: #4A5160; --text-primary: #F1F4F8; --text-secondary: #B0B7C5; /* lifted from #A8B0BF β€” needed +1 step contrast */ --text-tertiary: #7C8494; /* lifted from #6B7384 β€” passes 4.5:1 on --surface */ --text-quaternary: #5A6273; --text-on-accent: #FFFFFF; --accent: #FF6B2C; /* M-logo orange, dark-mode bumped a touch for contrast */ --accent-hover: #FF855A; --accent-soft: rgba(255, 107, 44, 0.22); --accent-soft-2: rgba(255, 107, 44, 0.12); --success: #34D399; --success-soft: rgba(52, 211, 153, 0.16); --success-fg: #34D399; --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.16); --critical: #F87171; --critical-soft: rgba(248, 113, 113, 0.18); --danger: #EF4444; --danger-bg: rgba(248, 113, 113, 0.12); --info: var(--accent); --info-soft: var(--accent-soft); --card-overlay: rgba(20, 23, 29, 0.6); --divider: var(--border-subtle); --overlay-bg: rgba(0, 0, 0, 0.55); --tooltip-bg: var(--surface-elevated); --tooltip-fg: var(--text-primary); --toast-bg: var(--surface-elevated); --toast-fg: var(--text-primary); --grid-line: rgba(255, 255, 255, 0.03); --hover: var(--surface-elevated); --peer-1: var(--accent); --peer-2: var(--warning); --peer-3: var(--success); --peer-1-soft: var(--accent-soft); --peer-2-soft: var(--warning-soft); --peer-3-soft: var(--success-soft); --avatar-stack-border: var(--surface); /* Damped shadows: dark surfaces don't read depth from luminance β€” they read it from the contrast ring. Outer glow stays faint. */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--border-subtle); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.36), 0 0 0 1px var(--border-subtle); --shadow-3: 0 6px 18px rgba(0, 0, 0, 0.44), 0 0 0 1px var(--border-subtle); --shadow-float: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-13); line-height: var(--lh-body); letter-spacing: var(--tracking-body); font-feature-settings: "ss01", "cv11"; /* Geist stylistic alternates: alt-a + better digits */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Theme swap β€” limited to chrome-level surfaces; transform/layout stay un-transitioned to avoid dragging port animations through the swap. */ :root.theme-swapping body, :root.theme-swapping .chip-pill, :root.theme-swapping .chip-presence, :root.theme-swapping .cmd, :root.theme-swapping .port, :root.theme-swapping .port__h, :root.theme-swapping .dock, :root.theme-swapping .cmdk-modal, :root.theme-swapping .cheatsheet-modal, :root.theme-swapping .kbd { transition: var(--theme-transition); } button { font-family: inherit; font-size: inherit; cursor: pointer; } img { display: block; max-width: 100%; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Component primitives ──────────────────────────────────────────── */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--sp-1); background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-11); color: var(--text-secondary); } .pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: 0.01em; } .pill--accent { background: var(--accent-soft); color: var(--accent-hover); } .pill--success { background: var(--success-soft); color: var(--success); } .pill--warning { background: var(--warning-soft); color: var(--warning); } .pill--critical { background: var(--critical-soft); color: var(--critical); } .pill--neutral { background: var(--surface-2); color: var(--text-secondary); } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); } .dot--accent { background: var(--accent); } .dot--success { background: var(--success); } .dot--warning { background: var(--warning); } .dot--critical { background: var(--critical); } /* Tabular numerals + slight tightening β€” operator-grade dense data feels right. */ .mono { font-family: var(--font-mono); font-feature-settings: "tnum" on, "ss01" on; letter-spacing: var(--tracking-mono); } /* ─── Buttons ──────────────────────────────────────────────────────── Five states: rest, hover, focus-visible, active, disabled. Three variants: default (secondary), --primary, --ghost. Two modifiers: --danger (destructive), --sm (compact). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-3); background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: var(--tracking-body); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:active { transform: scale(0.98); } .btn[disabled], .btn:disabled { opacity: 0.5; pointer-events: none; } .btn .ph { font-size: 14px; } .btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn--ghost:hover { background: var(--surface-2); color: var(--text-primary); } .btn--danger { background: var(--surface); color: var(--danger); border-color: var(--border); } .btn--danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); } .btn--sm { height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-12); gap: var(--sp-1); } .btn--sm .ph { font-size: 12px; } /* ─── Phosphor icon sizes ───────────────────────────────────────────── */ .ph { font-size: 16px; } .ph--lg { font-size: 20px; } .ph--xl { font-size: 24px; } /* ─── Brand logo helper ─────────────────────────────────────────────── */ .brand { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; background: var(--surface-2); padding: 2px; } .brand--lg { width: 28px; height: 28px; padding: 4px; } .brand--md { width: 20px; height: 20px; padding: 3px; } /* ─── Avatar (Pravatar) ─────────────────────────────────────────────── */ .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: var(--surface-2); } .avatar--sm { width: 20px; height: 20px; } .avatar--md { width: 32px; height: 32px; } .avatar--lg { width: 44px; height: 44px; } /* ─── Typography utilities ──────────────────────────────────────────── */ /* Workers MUST use these classes for hero / kicker / heading patterns instead of inline font-size + letter-spacing styles. */ .t-kicker { font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-tertiary); } .t-kicker--lg { letter-spacing: var(--tracking-kicker-lg); } .t-section-h { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--text-tertiary); margin: 0; } .t-h1 { font-size: var(--fs-36); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; } .t-h2 { font-size: var(--fs-22); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0; } .t-h3 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); color: var(--text-primary); margin: 0; } .t-lede { font-size: var(--fs-15); color: var(--text-secondary); line-height: 1.55; max-width: 64ch; } .t-lede strong { color: var(--text-primary); font-weight: var(--fw-semibold); } .t-meta { font-size: var(--fs-12); color: var(--text-tertiary); letter-spacing: var(--tracking-body); } /* Inline status-line β€” the operator-default replacement for KPI 4-card grids. Single dense baseline-aligned row of metrics separated by Β· dividers. See DESIGN.md Β§ "Anti-pattern β€” KPI 4-equal-card grids" for the doctrine. */ .status-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) 0; margin: 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-13); color: var(--text-secondary); } .status-line__item { display: inline-flex; align-items: baseline; gap: var(--sp-1); } .status-line__sep { color: var(--border); } .status-line__focal { color: var(--text-primary); font-size: var(--fs-16); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-heading); } .status-line__delta--up { color: var(--success); } .status-line__delta--down { color: var(--critical); } .status-line strong { color: var(--text-primary); font-weight: var(--fw-semibold); }