/* ───────────────────────────────────────────────────────────── Simple.Operations · Colors & Type The single CSS file every artifact should @import. Defines: 1. Base color tokens (--so-*) — light + dark scope 2. Semantic type roles — h1/h2/eyebrow/hero/caption/body/mono 3. Font loading — Plus Jakarta Sans via Google Fonts (substitution — flagged in README) Source of truth in the live app: src/index.css under :root + html.dark. ───────────────────────────────────────────────────────────── */ /* ── 0. Self-hosted fonts ─────────────────────────────────── */ /* Plus Jakarta Sans — single variable font, 200–800 weight axis. The path is RELATIVE to this CSS file's location, so artifacts at any depth (preview/*.html, ui_kits/*/index.html) resolve correctly as long as they `` this file. */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype'); } /* JetBrains Mono — recommended pair, loaded from Google Fonts as a substitute until the production .woff2/.ttf is dropped into fonts/. This is a flagged substitution — see README §6. */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ── 1. Color tokens — LIGHT (default) ──────────────────────── */ :root { /* Brand */ --so-accent: #3525cd; --so-accent-soft: #ede9fe; --so-accent-rgb: 53, 37, 205; --so-accent-text: #ffffff; /* fg on filled accent buttons */ /* Surfaces */ --so-bg: #fbfbfc; --so-surface: #ffffff; --so-surface2: #f1f1f5; --so-row-hover: #f5f5f9; --so-border: #e5e5eb; --so-sidebar-active:#ede9fe; /* Text */ --so-text: #1a1a23; /* fg1 */ --so-text2: #4a4a55; /* fg2 — secondary */ --so-text3: #7a7a86; /* fg3 — tertiary / labels */ /* Card-accent hues Identity = slate · Planning = indigo · Quality = teal Progress = green | amber | red depending on delay state. */ --so-card-slate: #475569; --so-card-indigo: #3525cd; --so-card-teal: #0d9488; --so-card-green: #16a34a; --so-card-amber: #f59e0b; --so-card-red: #dc2626; /* Status pill — semantic intent colors */ --so-pill-neutral-bg: #eef0f5; --so-pill-neutral-fg: #3f3f46; --so-pill-info-bg: #e0e7ff; --so-pill-info-fg: #3730a3; --so-pill-success-bg: #dcfce7; --so-pill-success-fg: #15803d; --so-pill-warning-bg: #fef3c7; --so-pill-warning-fg: #92400e; --so-pill-danger-bg: #ffdad6; --so-pill-danger-fg: #ba1a1a; /* Convenience shadow recipes (used by PolishCard + drawers) */ --so-shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 6px 16px -8px rgba(15,23,42,.07); --so-shadow-drawer: -6px 0 16px rgba(0,0,0,.06); --so-shadow-popover:0 4px 12px rgba(0,0,0,.12); /* Radii (tight scale — operator UI) */ --so-radius-xs: 3px; /* doc-type chips */ --so-radius-sm: 6px; /* inputs / buttons / icon backdrops */ --so-radius-md: 12px; /* polish cards */ --so-radius-lg: 14px; /* list-row cards */ --so-radius-pill: 9999px; /* Spacing scale (we use these numbers verbatim — see CLAUDE_DESIGN_PRIMER.md) */ --so-space-1: 4px; --so-space-2: 6px; --so-space-3: 7px; /* card inner gap (xs density) */ --so-space-4: 8px; --so-space-5: 10px; /* card padding + card-strip gap */ --so-space-6: 12px; /* card horizontal padding */ --so-space-8: 16px; --so-space-12: 24px; } /* ── 1b. Color tokens — DARK scope ──────────────────────────── */ /* Apply via `class="so-dark"` on a wrapper (used by handoff bundles) or `html.dark` in the live app. Both selectors flip the same vars. */ .so-dark, html.dark { --so-accent: #b1a3ff; --so-accent-soft: rgba(177, 163, 255, 0.14); --so-accent-text: #1a1a23; --so-bg: #191921; --so-surface: #1d1d27; --so-surface2: #262631; --so-row-hover: #1f1f29; --so-border: #2a2a33; --so-sidebar-active:rgba(177, 163, 255, 0.14); --so-text: #f5f5f7; --so-text2: #b0b0bd; --so-text3: #6a6a78; --so-card-slate: #94a3b8; --so-card-indigo: #a594ff; --so-card-teal: #5eead4; --so-card-green: #4ade80; --so-card-amber: #fbbf24; --so-card-red: #fca5a5; --so-pill-neutral-bg: #2a2935; --so-pill-neutral-fg: #cfd0db; --so-pill-info-bg: #262450; --so-pill-info-fg: #a5b4ff; --so-pill-success-bg: #15301f; --so-pill-success-fg: #86efac; --so-pill-warning-bg: #3a2810; --so-pill-warning-fg: #fcd34d; --so-pill-danger-bg: #3b1414; --so-pill-danger-fg: #fca5a5; --so-shadow-card: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -8px rgba(0,0,0,.50); } /* ── 2. Base type setup ────────────────────────────────────── */ html, body { margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14px; line-height: 1.4; color: var(--so-text); background: var(--so-bg); -webkit-font-smoothing: antialiased; text-wrap: pretty; } /* ── 3. Semantic type roles (helper classes — match Tweaks panel + decks) ── Numbers come straight from CLAUDE_DESIGN_PRIMER.md §6 (Design density). Apply as either CSS vars or utility classes. */ :root { --so-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --so-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* roles */ --so-h1-size: 1.6rem; /* dashboard page title */ --so-h1-weight: 800; --so-h1-tracking: -0.02em; --so-h2-size: 1.1rem; /* pane headers (Purchase Orders, Inbox …) */ --so-h2-weight: 700; --so-h3-size: 0.95rem; --so-h3-weight: 700; --so-hero-size: 1.6rem; /* PolishCard "Hero" metric */ --so-hero-weight: 700; --so-hero-tracking: -0.01em; --so-eyebrow-size: 0.7rem; /* card eyebrow (Identity / Planning / …) */ --so-eyebrow-weight: 600; --so-eyebrow-tracking:0.02em; --so-overline-size: 0.65rem; /* uppercase 0.15em — OPERATIONS CONSOLE */ --so-overline-weight:700; --so-overline-tracking:0.15em; --so-body-size: 0.86rem; /* default body / row title */ --so-body-weight: 400; --so-caption-size: 0.78rem; --so-caption-weight: 400; --so-micro-size: 0.7rem; /* footnotes, "12 shown" */ --so-micro-weight: 500; --so-pill-size: 0.72rem; --so-pill-weight: 600; --so-kind-size: 0.62rem; /* uppercase event-kind label */ --so-kind-weight: 600; --so-kind-tracking: 0.06em; --so-mono-size: 0.82rem; } .so-h1 { font-size: var(--so-h1-size); font-weight: var(--so-h1-weight); letter-spacing: var(--so-h1-tracking); color: var(--so-text); margin: 0; } .so-h2 { font-size: var(--so-h2-size); font-weight: var(--so-h2-weight); color: var(--so-text); margin: 0; } .so-h3 { font-size: var(--so-h3-size); font-weight: var(--so-h3-weight); color: var(--so-text); margin: 0; } .so-hero { font-size: var(--so-hero-size); font-weight: var(--so-hero-weight); letter-spacing: var(--so-hero-tracking); line-height: 1; font-variant-numeric: tabular-nums; } .so-eyebrow { font-size: var(--so-eyebrow-size); font-weight: var(--so-eyebrow-weight); letter-spacing: var(--so-eyebrow-tracking); } .so-overline { font-size: var(--so-overline-size); font-weight: var(--so-overline-weight); letter-spacing: var(--so-overline-tracking); text-transform: uppercase; color: var(--so-accent); } .so-body { font-size: var(--so-body-size); font-weight: var(--so-body-weight); color: var(--so-text); } .so-caption { font-size: var(--so-caption-size); color: var(--so-text2); } .so-micro { font-size: var(--so-micro-size); color: var(--so-text3); font-weight: var(--so-micro-weight); } .so-mono { font-family: var(--so-font-family-mono); font-size: var(--so-mono-size); font-variant-numeric: tabular-nums; } /* ── 4. Animations (lifted verbatim from tokens.css) ──────────── */ @keyframes so-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }