/* * Platform design tokens — the shared visual contract. * * This file is deliberately plain CSS with no build step and no framework, so that a * Go, PHP, Python or Svelte container app can look native with a single tag: * * * * The React shell imports this exact file too (see src/app/globals.css), so there is * one source of truth and the shell can never drift from the apps it hosts. * * Dark is the default. Opt into light with . * Everything is namespaced `--pf-` / `.pf-` to avoid collisions inside app containers. */ :root { /* Surfaces, from furthest back to closest */ --pf-bg: #0a0b0d; --pf-surface: #101215; --pf-elevated: #16191e; --pf-overlay: #1c2027; /* Text */ --pf-fg: #e9ebee; --pf-fg-muted: #8b929d; --pf-fg-subtle: #5f6670; /* Lines */ --pf-border: #23272e; --pf-border-strong: #31363f; /* Accents — the three from the reference palette, tuned for dark surfaces */ --pf-teal: #2fbe93; --pf-teal-dim: #14392f; --pf-blue: #5b8dff; --pf-blue-dim: #16233f; --pf-orange: #f0873f; --pf-orange-dim: #3a2415; /* Extra hues, for labelling one thing apart from another (project colours). Not semantic — nothing should read meaning into purple the way it does into danger. */ --pf-purple: #a06bff; --pf-purple-dim: #251a40; --pf-pink: #f0619c; --pf-pink-dim: #3a1628; /* Semantic */ --pf-primary: var(--pf-teal); --pf-primary-fg: #04120d; --pf-danger: #f0616d; --pf-danger-dim: #3a1620; --pf-warning: var(--pf-orange); --pf-success: var(--pf-teal); --pf-ring: color-mix(in oklab, var(--pf-primary) 55%, transparent); /* Shape & motion */ --pf-radius-sm: 6px; --pf-radius: 10px; --pf-radius-lg: 14px; --pf-radius-xl: 20px; --pf-shadow: 0 1px 2px rgb(0 0 0 / 0.32), 0 8px 24px -12px rgb(0 0 0 / 0.5); --pf-ease: cubic-bezier(0.16, 1, 0.3, 1); --pf-dur: 180ms; --pf-font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pf-font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace; color-scheme: dark; } :root[data-theme="light"] { --pf-bg: #ffffff; --pf-surface: #fafafa; --pf-elevated: #f4f5f6; --pf-overlay: #ffffff; --pf-fg: #14161a; --pf-fg-muted: #626973; --pf-fg-subtle: #8d939c; --pf-border: #e5e7ea; --pf-border-strong: #d2d6db; --pf-teal: #12805f; --pf-teal-dim: #e2f5ee; --pf-blue: #2f6fec; --pf-blue-dim: #e6eeff; --pf-orange: #c85a15; --pf-orange-dim: #fdeee2; --pf-purple: #7038d4; --pf-purple-dim: #f0e9ff; --pf-pink: #c92f6d; --pf-pink-dim: #fdeaf2; --pf-primary-fg: #ffffff; --pf-danger: #ce2f42; --pf-danger-dim: #fdeaec; color-scheme: light; } /* ---------------------------------------------------------------- base ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--pf-bg); color: var(--pf-fg); font-family: var(--pf-font-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--pf-fg); text-decoration-color: var(--pf-border-strong); text-underline-offset: 3px; } code, pre, kbd { font-family: var(--pf-font-mono); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--pf-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ----------------------------------------------------------- components ---- */ .pf-card { background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: var(--pf-radius-lg); padding: 20px; } .pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--pf-border-strong); border-radius: var(--pf-radius); background: var(--pf-elevated); color: var(--pf-fg); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease), opacity var(--pf-dur) var(--pf-ease); } .pf-btn:hover:not(:disabled) { background: var(--pf-overlay); border-color: var(--pf-fg-subtle); } .pf-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pf-btn--primary { background: var(--pf-primary); border-color: transparent; color: var(--pf-primary-fg); } .pf-btn--primary:hover:not(:disabled) { background: color-mix(in oklab, var(--pf-primary) 88%, white); border-color: transparent; } .pf-btn--ghost { background: transparent; border-color: transparent; color: var(--pf-fg-muted); } .pf-btn--ghost:hover:not(:disabled) { background: var(--pf-elevated); color: var(--pf-fg); } .pf-input { width: 100%; height: 38px; padding: 0 12px; background: var(--pf-bg); border: 1px solid var(--pf-border-strong); border-radius: var(--pf-radius); color: var(--pf-fg); font: inherit; font-size: 14px; transition: border-color var(--pf-dur) var(--pf-ease); } .pf-input::placeholder { color: var(--pf-fg-subtle); } .pf-input:focus { border-color: var(--pf-primary); } .pf-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--pf-fg-muted); } .pf-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--pf-elevated); border: 1px solid var(--pf-border); color: var(--pf-fg-muted); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; } .pf-badge--teal { background: var(--pf-teal-dim); border-color: transparent; color: var(--pf-teal); } .pf-badge--blue { background: var(--pf-blue-dim); border-color: transparent; color: var(--pf-blue); } .pf-badge--orange { background: var(--pf-orange-dim); border-color: transparent; color: var(--pf-orange); } .pf-badge--danger { background: var(--pf-danger-dim); border-color: transparent; color: var(--pf-danger); } .pf-muted { color: var(--pf-fg-muted); } .pf-mono { font-family: var(--pf-font-mono); font-variant-ligatures: none; }