/* * tokens.css — stc-branded design tokens. * * Two token layers: * 1. Brand + scale primitives (theme-independent): stc palette, spacing, * radius, typography, shadows, z-index. * 2. Semantic tokens (theme-dependent): surfaces, text, borders, states. * These are re-bound per theme via [data-theme="light|dark"] so the whole * UI recolours by flipping one attribute on . * * stc brand reference: signature "stc purple" (#4F008C) with a vibrant magenta * accent. Neutrals are tuned to sit calmly beside the strong brand hue. */ :root { /* ---- Brand palette (theme-independent) ---- */ --stc-purple: #4f008c; --stc-purple-700: #3d006e; --stc-purple-600: #5a1a9c; --stc-purple-400: #8a4fc0; --stc-purple-200: #d9c2ef; --stc-purple-050: #f3ecfb; --stc-magenta: #e5007d; --stc-magenta-600: #c30069; --stc-magenta-200: #f7b3d6; --stc-teal: #00a3a1; /* secondary accent used sparingly */ /* ---- Status hues (theme-independent bases) ---- */ --hue-success: #1f9d55; --hue-success-bg: #e4f5ec; --hue-warning: #b7791f; --hue-warning-bg: #fbf3e0; --hue-danger: #d0342c; --hue-danger-bg: #fbe6e5; --hue-info: #2563eb; --hue-info-bg: #e6efff; /* ---- Neutral ramp ---- */ --gray-0: #ffffff; --gray-25: #fbfafd; --gray-50: #f4f2f7; --gray-100: #eae7ef; --gray-200: #d8d3e0; --gray-300: #bcb5c9; --gray-400: #948aa6; --gray-500: #6d6483; --gray-600: #524a66; --gray-700: #3b3450; --gray-800: #262035; --gray-900: #171225; --gray-950: #0e0b17; /* ---- Typography ---- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-md: 0.875rem; /* 14 — base UI text */ --fs-lg: 1rem; /* 16 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; /* ---- Spacing scale (4px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* ---- Layout metrics ---- */ --sidebar-width: 256px; --sidebar-width-collapsed: 72px; --navbar-height: 60px; --content-max: 1280px; /* ---- Motion ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-med: 200ms; /* ---- Z-index ---- */ --z-sidebar: 40; --z-navbar: 30; --z-backdrop: 50; --z-modal: 60; --z-toast: 70; } /* ===================== LIGHT THEME ===================== */ :root, [data-theme="light"] { color-scheme: light; --brand: var(--stc-purple); --brand-strong: var(--stc-purple-700); --brand-soft: var(--stc-purple-050); --brand-contrast: #ffffff; --accent: var(--stc-magenta); --bg-app: var(--gray-50); --bg-surface: var(--gray-0); --bg-surface-2: var(--gray-25); --bg-raised: var(--gray-0); --bg-hover: var(--gray-100); --bg-active: var(--brand-soft); --bg-inverse: var(--gray-900); --text-strong: var(--gray-900); --text: var(--gray-700); --text-muted: var(--gray-500); --text-inverse: var(--gray-0); --text-on-brand: #ffffff; --border: var(--gray-200); --border-strong: var(--gray-300); --sidebar-bg: var(--stc-purple-700); --sidebar-text: #e9dcf6; --sidebar-text-muted: #b79bd6; --sidebar-active-bg: rgba(255, 255, 255, 0.14); --sidebar-active-text: #ffffff; --sidebar-accent: var(--stc-magenta); --success: var(--hue-success); --success-bg: var(--hue-success-bg); --warning: var(--hue-warning); --warning-bg: var(--hue-warning-bg); --danger: var(--hue-danger); --danger-bg: var(--hue-danger-bg); --info: var(--hue-info); --info-bg: var(--hue-info-bg); --focus-ring: 0 0 0 3px rgba(79, 0, 140, 0.35); --shadow-sm: 0 1px 2px rgba(23, 18, 37, 0.06), 0 1px 3px rgba(23, 18, 37, 0.1); --shadow-md: 0 4px 12px rgba(23, 18, 37, 0.1); --shadow-lg: 0 12px 32px rgba(23, 18, 37, 0.18); --backdrop: rgba(23, 18, 37, 0.45); } /* ===================== DARK THEME ===================== */ [data-theme="dark"] { color-scheme: dark; --brand: var(--stc-purple-400); --brand-strong: var(--stc-purple-200); --brand-soft: rgba(138, 79, 192, 0.16); --brand-contrast: var(--gray-950); --accent: var(--stc-magenta-200); --bg-app: var(--gray-950); --bg-surface: var(--gray-900); --bg-surface-2: var(--gray-800); --bg-raised: var(--gray-800); --bg-hover: rgba(255, 255, 255, 0.06); --bg-active: var(--brand-soft); --bg-inverse: var(--gray-0); --text-strong: #f5f2fb; --text: #d8d2e6; --text-muted: #9a90b0; --text-inverse: var(--gray-900); --text-on-brand: #ffffff; --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.18); --sidebar-bg: #1b1226; --sidebar-text: #d8c9ea; --sidebar-text-muted: #8f7fa8; --sidebar-active-bg: rgba(229, 0, 125, 0.18); --sidebar-active-text: #ffffff; --sidebar-accent: var(--stc-magenta-200); --success: #45c07d; --success-bg: rgba(69, 192, 125, 0.14); --warning: #e0aa4b; --warning-bg: rgba(224, 170, 75, 0.14); --danger: #f0736b; --danger-bg: rgba(240, 115, 107, 0.14); --info: #6fa0ff; --info-bg: rgba(111, 160, 255, 0.14); --focus-ring: 0 0 0 3px rgba(138, 79, 192, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --backdrop: rgba(0, 0, 0, 0.6); }