/* fantasy/web/static/tokens.css * * Fantasy design tokens. Seeded from iris/web/static/tokens.css (the * post-cleanup rem discipline) then trimmed to Fantasy's needs: the * Iris board/theme/gauge/okr/anchor tokens are dropped; the generic * surface/text/type/size/effect scale is kept so Fantasy CSS speaks the * same token language as the rest of the platform. * * Color tokens are the single source of truth — no other Fantasy CSS * file defines a hardcoded hex color (per the Ceryn CSS rule). If you * need a color that isn't here, add a token first. * * Light is the default; dark engages via the OS `prefers-color-scheme` * or an explicit [data-theme] on . All typography and spacing * tokens are rem so a future font-scale changer rescales the whole UI. * * The name is deliberately plain (the Comps school of naming); the * accent is a restrained green, the only brand gesture. */ :root { /* ----- Surface (light mode default) ----- */ --color-bg: #fafafc; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-border: #e2e5eb; --color-border-strong: #cbd0d9; /* ----- Text (light) ----- */ --color-text: #1f2937; --color-text-secondary: #6b7280; --color-text-muted: #94a3b8; --color-text-inverse: #ffffff; /* ----- Accent (constant intent across modes; values per mode) ----- */ --color-accent: #059669; --color-accent-hover: #047857; --color-accent-active: #065f46; --color-accent-on: #ffffff; /* ----- Backwards-compat / cross-product aliases ----- * Fantasy CSS should reference --color-accent*; these aliases exist so * any component snippet ported from Iris/Comps that reaches for * --color-brand-primary resolves to the Fantasy accent. */ --color-brand-primary: var(--color-accent); --color-brand-primary-hover: var(--color-accent-hover); --color-brand-primary-active: var(--color-accent-active); --color-brand-primary-on: var(--color-accent-on); /* ----- Semantic ----- */ --color-status-good: #059669; --color-status-warn: #d97706; --color-status-bad: #dc2626; --color-status-muted: #94a3b8; /* ----- Type ----- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ----- Font sizes (rem — see header note) ----- */ --font-size-2xs: 0.6875rem; /* 11px */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.0625rem; /* 17px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 3rem; /* 48px */ --tracking-tight: -0.02em; --tracking-normal: 0; --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; /* ----- Sizing (multiplier × 4px base, expressed in rem) ----- */ --size-0-5: 0.125rem; /* 2px */ --size-1: 0.25rem; /* 4px */ --size-2: 0.5rem; /* 8px */ --size-3: 0.75rem; /* 12px */ --size-4: 1rem; /* 16px */ --size-5: 1.25rem; /* 20px */ --size-6: 1.5rem; /* 24px */ --size-8: 2rem; /* 32px */ --size-10: 2.5rem; /* 40px */ --size-12: 3rem; /* 48px */ --size-16: 4rem; /* 64px */ --size-24: 6rem; /* 96px */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-pill: 9999px; /* ----- Effects ----- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); --focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.4); --transition-fast: 120ms ease; --transition-base: 180ms ease; } /* ----- Dark values, shared by the OS-preference default and the explicit [data-theme="dark"] toggle (a future settings control). ----- */ :root[data-theme="dark"] { --color-bg: #141b2d; --color-surface: #1b2236; --color-surface-raised: #222a40; --color-border: #2a3349; --color-border-strong: #3a4360; --color-text: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #141b2d; --color-accent: #34d399; --color-accent-hover: #6ee7b7; --color-accent-active: #a7f3d0; --color-accent-on: #0b1220; --color-status-good: #34d399; --color-status-warn: #f59e0b; --color-status-bad: #ef4444; --color-status-muted: #64748b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.4); } /* Honor the OS preference on first visit, until the user picks a theme explicitly. `:root:not([data-theme])` stops applying the moment a data-theme attribute is set on by a future toggle. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #141b2d; --color-surface: #1b2236; --color-surface-raised: #222a40; --color-border: #2a3349; --color-border-strong: #3a4360; --color-text: #e2e8f0; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #141b2d; --color-accent: #34d399; --color-accent-hover: #6ee7b7; --color-accent-active: #a7f3d0; --color-accent-on: #0b1220; --color-status-good: #34d399; --color-status-warn: #f59e0b; --color-status-bad: #ef4444; --color-status-muted: #64748b; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.4); } } /* The HTML `hidden` attribute should always hide (see Iris note). */ [hidden] { display: none !important; } /* Sensible base styles using the tokens. */ html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color-scheme: light dark; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--color-bg); color: var(--color-text); transition: background-color var(--transition-base), color var(--transition-base); } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); text-decoration: underline; } a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }