/* * Teamworkk design tokens. * * - Color tokens in OKLCH, defined for both light and dark modes via the * data-theme attribute on . Mode is set by the pre-Blazor inline * script in each host's HTML host (see Teamworkk/PLAN.md Phase J2). * - Typography tokens use self-hosted Inter Variable + JetBrains Mono. * - Spacing follows Tailwind's default 4px sub-grid; we do not redefine it * here — components reference Tailwind spacing utilities directly. * * Token catalog mirrored in Teamworkk/UI-DESIGN.md. */ /* ------------------------------------------------------------------------- */ /* Fonts (self-hosted under _content/Teamworkk.Shared/fonts/). */ /* ------------------------------------------------------------------------- */ @font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2-variations"), url("../fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); } /* ------------------------------------------------------------------------- */ /* Light mode tokens (default). */ /* ------------------------------------------------------------------------- */ :root { color-scheme: light; /* Surfaces — soft tinted neutrals (Phase U): never pure white, and surface ≠ background so cards/fields read as distinct lifted layers. The tint follows --tint-hue, so neutrals subtly track the active palette. */ --background: oklch(0.965 0.015 var(--tint-hue)); --surface: oklch(0.992 0.008 var(--tint-hue)); --surface-2: oklch(0.945 0.018 var(--tint-hue)); --surface-3: oklch(0.910 0.022 var(--tint-hue)); /* Text — never pure black */ --text: oklch(0.30 0.020 var(--tint-hue)); --text-muted: oklch(0.52 0.018 var(--tint-hue)); --text-subtle: oklch(0.64 0.015 var(--tint-hue)); /* Borders */ --border: oklch(0.900 0.016 var(--tint-hue)); --border-strong: oklch(0.840 0.020 var(--tint-hue)); /* Brand palette inputs — the palette layer (PLAN.md Phase T.2) overrides these on . Defaults below reproduce the original hue-264 accent exactly, so the app is visually unchanged until a palette is applied. */ --brand-hue: 264; --brand-chroma: 0.22; --brand-l: 0.55; /* light-mode base lightness (dark derives +0.10) */ --brand-fg: oklch(0.985 0 0); /* text/icon color on brand fills */ --tint-hue: 264; /* reserved — neutrals are untinted (chroma 0) today; wired in a later phase */ /* Brand / accent — DERIVED from the inputs above. The --accent* names stay the public tokens (components + Tailwind @theme reference them), so nothing else changes. */ --accent: oklch(var(--brand-l) var(--brand-chroma) var(--brand-hue)); --accent-hover: oklch(calc(var(--brand-l) - 0.05) var(--brand-chroma) var(--brand-hue)); --accent-fg: var(--brand-fg); /* Semantic statuses */ --success: oklch(0.65 0.18 145); --warning: oklch(0.7 0.18 70); --danger: oklch(0.6 0.22 25); /* Focus + selection — derived from the same brand inputs. */ --focus-ring: oklch(var(--brand-l) var(--brand-chroma) var(--brand-hue) / 0.5); --selection-bg: oklch(var(--brand-l) var(--brand-chroma) var(--brand-hue) / 0.2); /* Typography */ --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Material (Phase U): a faint top sheen on neutral surfaces + the single-hue brand gradient (brightness-only, no hue shift) for colored faces. */ --sheen: linear-gradient(180deg, oklch(1 0 0 / 0.55), oklch(1 0 0 / 0) 60%); --sheen-soft: linear-gradient(180deg, oklch(1 0 0 / 0.28), oklch(1 0 0 / 0) 55%); --brand-grad: linear-gradient(135deg, oklch(calc(var(--brand-l) + 0.09) var(--brand-chroma) var(--brand-hue)), var(--accent)); /* Elevation — soft, layered, faintly tinted (never thick). */ --shadow-sm: 0 1px 2px oklch(0.30 0.03 var(--tint-hue) / 0.07); --shadow-md: 0 2px 4px oklch(0.30 0.03 var(--tint-hue) / 0.07), 0 8px 20px -6px oklch(0.30 0.05 var(--tint-hue) / 0.14); --shadow-lg: 0 4px 8px oklch(0.30 0.03 var(--tint-hue) / 0.09), 0 18px 40px -10px oklch(0.30 0.06 var(--tint-hue) / 0.20); } /* ------------------------------------------------------------------------- */ /* Dark mode tokens. */ /* ------------------------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; /* Soft warm-dark neutrals (Phase U): never pure #000; surface ≠ background. */ --background: oklch(0.185 0.018 var(--tint-hue)); --surface: oklch(0.225 0.022 var(--tint-hue)); --surface-2: oklch(0.275 0.026 var(--tint-hue)); --surface-3: oklch(0.315 0.028 var(--tint-hue)); --text: oklch(0.95 0.006 var(--tint-hue)); --text-muted: oklch(0.72 0.012 var(--tint-hue)); --text-subtle: oklch(0.58 0.012 var(--tint-hue)); --border: oklch(0.330 0.018 var(--tint-hue)); --border-strong: oklch(0.400 0.022 var(--tint-hue)); /* Dark redeclares the brand-derived tokens with a +0.10 lightness offset (brand pops on the dark canvas) and a dark --brand-fg. It does NOT touch --brand-l/-hue/-chroma, so a palette set once on drives both modes. */ --brand-fg: oklch(0.145 0 0); --accent: oklch(calc(var(--brand-l) + 0.10) var(--brand-chroma) var(--brand-hue)); --accent-hover: oklch(calc(var(--brand-l) + 0.15) var(--brand-chroma) var(--brand-hue)); --accent-fg: var(--brand-fg); --success: oklch(0.7 0.18 145); --warning: oklch(0.75 0.18 70); --danger: oklch(0.65 0.22 25); --focus-ring: oklch(calc(var(--brand-l) + 0.10) var(--brand-chroma) var(--brand-hue) / 0.5); --selection-bg: oklch(calc(var(--brand-l) + 0.10) var(--brand-chroma) var(--brand-hue) / 0.3); /* Dark material: dimmer sheen + deeper soft shadows. --brand-grad is redeclared so its lighter stop stays above the (lighter) dark accent. */ --sheen: linear-gradient(180deg, oklch(1 0 0 / 0.10), oklch(1 0 0 / 0) 60%); --sheen-soft: linear-gradient(180deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0) 55%); --brand-grad: linear-gradient(135deg, oklch(calc(var(--brand-l) + 0.20) var(--brand-chroma) var(--brand-hue)), var(--accent)); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 2px 4px oklch(0 0 0 / 0.35), 0 10px 24px -6px oklch(0 0 0 / 0.50); --shadow-lg: 0 4px 10px oklch(0 0 0 / 0.40), 0 22px 48px -10px oklch(0 0 0 / 0.62); } /* ------------------------------------------------------------------------- */ /* Baseline body styling. */ /* This is the ONLY visible change in Phase J2 — body picks up the surface */ /* and text tokens plus the Inter font. Pages keep their existing Bootstrap */ /* chrome until later phases restyle them. */ /* ------------------------------------------------------------------------- */ body { /* Soft brand-washed canvas (Phase U): two faint radial brand glows over the tinted --background. Fixed so it doesn't tile as pages scroll. */ background: radial-gradient(1200px 600px at 100% -5%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 60%), radial-gradient(900px 500px at -10% 110%, color-mix(in oklch, var(--accent) 6%, transparent), transparent 55%), var(--background); background-attachment: fixed; color: var(--text); font-family: var(--font-sans); font-feature-settings: "cv11", "ss03"; /* Inter: alt single-storey 'a', alt 'g' */ font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } code, kbd, samp, pre { font-family: var(--font-mono); } ::selection { background-color: var(--selection-bg); } /* Respect users with reduced-motion preferences globally. Per-component motion (View Transitions, micro-interactions) is added in Phase J14. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }