/* ============================================================================= Design tokens — Tempo Monitor v2 Dark by default; [data-theme="light"] on switches palette. Brand accent comes from the active pack at runtime (--accent, --accent-2 set on :root). Rules: 4px spacing grid, 1px hairline borders, one accent, semantic tones only for status. ============================================================================= */ :root { /* Brand (overridden per pack) */ --accent: #4f7cff; --accent-2: #22d3ee; --accent-contrast: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent); --accent-border: color-mix(in srgb, var(--accent) 38%, transparent); --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); /* Surfaces (dark) */ --bg: #090b11; --bg-elevated: #0d1017; --surface: #11151e; --surface-2: #161b26; --surface-3: #1d2330; --surface-hover: #1a202c; --overlay: rgba(4, 6, 10, 0.72); --border: rgba(148, 163, 184, 0.10); --border-strong: rgba(148, 163, 184, 0.20); --border-focus: var(--accent); --text: #e7ebf3; --text-2: #a9b2c3; --text-3: #768096; --text-inverse: #0b0e14; /* Semantic tones: fg / soft bg / border */ --neutral: #a9b2c3; --neutral-soft: rgba(148, 163, 184, 0.12); --neutral-border: rgba(148, 163, 184, 0.24); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.13); --info-border: rgba(96, 165, 250, 0.32); --success: #34d399; --success-soft: rgba(52, 211, 153, 0.13); --success-border: rgba(52, 211, 153, 0.32); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.13); --warning-border: rgba(251, 191, 36, 0.32); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --danger-border: rgba(248, 113, 113, 0.34); --muted: #6b7489; --muted-soft: rgba(107, 116, 137, 0.12); --muted-border: rgba(107, 116, 137, 0.24); --accent-tone: var(--accent); /* Typography */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --lh-tight: 1.25; --lh: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing (4px grid) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* Radius */ --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3); --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* Layout */ --sidebar-w: 264px; --sidebar-w-collapsed: 68px; --topbar-h: 56px; --tabbar-h: 60px; --content-max: 1440px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* Z layers */ --z-sticky: 10; --z-sidebar: 40; --z-topbar: 50; --z-drawer: 60; --z-modal: 80; --z-palette: 90; --z-toast: 100; color-scheme: dark; } :root[data-theme="light"] { --bg: #f5f6f9; --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #f7f8fb; --surface-3: #eef0f5; --surface-hover: #f1f3f8; --overlay: rgba(15, 20, 30, 0.42); --border: rgba(15, 23, 42, 0.09); --border-strong: rgba(15, 23, 42, 0.16); --text: #111827; --text-2: #4b5563; --text-3: #6b7280; --text-inverse: #ffffff; --neutral: #4b5563; --neutral-soft: rgba(75, 85, 99, 0.08); --neutral-border: rgba(75, 85, 99, 0.18); --info: #2563eb; --info-soft: rgba(37, 99, 235, 0.08); --info-border: rgba(37, 99, 235, 0.24); --success: #059669; --success-soft: rgba(5, 150, 105, 0.09); --success-border: rgba(5, 150, 105, 0.26); --warning: #b45309; --warning-soft: rgba(217, 119, 6, 0.10); --warning-border: rgba(217, 119, 6, 0.28); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.08); --danger-border: rgba(220, 38, 38, 0.26); --muted: #6b7280; --muted-soft: rgba(107, 114, 128, 0.08); --muted-border: rgba(107, 114, 128, 0.2); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow: 0 6px 20px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06); color-scheme: light; } /* ----------------------------------------------------------------------------- Shell additions: control sizing, density, readable accent text, focus ring. ----------------------------------------------------------------------------- */ :root { --accent-solid: var(--accent); --accent-fg: color-mix(in srgb, var(--accent) 72%, #ffffff); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px color-mix(in srgb, var(--accent) 75%, transparent); --backdrop-blur: saturate(140%) blur(10px); --ctl-h: 36px; --ctl-h-sm: 30px; --ctl-h-lg: 44px; --cell-px: 12px; --cell-py: 10px; --card-p: var(--s-5); --page-px: var(--s-8); --page-py: var(--s-6); --mobile-bar-h: 52px; } :root[data-theme="light"] { --accent-fg: color-mix(in srgb, var(--accent) 78%, #000000); } :root[data-density="compact"] { --ctl-h: 32px; --ctl-h-sm: 26px; --cell-px: 10px; --cell-py: 6px; --card-p: var(--s-4); --page-py: var(--s-5); } @media (max-width: 767px) { :root { --page-px: var(--s-4); --page-py: var(--s-4); --card-p: var(--s-4); } } @media (min-width: 1800px) { :root { --content-max: 1680px; } } @media (pointer: coarse) { :root, :root[data-density="compact"] { --ctl-h: 44px; --ctl-h-sm: 36px; } }