/* ============================================================================ TAK Studio Design System — Tokens (ported into the TAKO Take-Off plugin) Source of truth: TAK Studio Time Tracking V2 packages/tak-ui/dist/tokens.css (values copied verbatim — do not hand-tune) web/src/index.css (reset / scrollbars / reduced-motion) Scoping note: the reference sets theme vars + page paint on :root/body. Here we scope the *painting* and the data-theme overrides to `.takeoff-wp-app` so the surrounding WordPress theme + admin bar are untouched. Static tokens (spacing, radius, typography, motion, z-index, shadows, semantic colors) live on :root — they are variable declarations only and paint nothing on their own. ========================================================================== */ /* ── Theme surfaces / text / accent ───────────────────────────────────────── Default = dark, matching the reference default theme. Applied to the app root so it can be flipped via data-theme without repainting the whole page. */ /* body.takstudio-app included so UI re-parented to by the app JS (auth modal, share modal, popovers) still resolves the theme tokens. */ .takeoff-wp-app, .takeoff-wp-app[data-theme="dark"], body.takstudio-app, body.takstudio-app[data-theme="dark"] { --surface-base: #141210; --surface-raised: #1E1B18; --surface-card: #2A2622; --surface-elevated: #35302B; --surface-overlay: #323130; --surface-modal: #1E1D1C; --text-primary: #F5F0E8; --text-secondary: rgba(242, 239, 233, 0.6); /* Tertiary Floor Rule: 0.56 clears 4.5:1 on card (5.1:1) and elevated (4.7:1). */ --text-tertiary: rgba(242, 239, 233, 0.56); --text-inverse: #111110; --accent: #FF7C4F; --accent-dim: rgba(255, 124, 79, 0.1); --accent-glow: rgba(255, 154, 61, 0.25); --accent-text: #FFB870; } .takeoff-wp-app[data-theme="light"], body.takstudio-app[data-theme="light"] { --surface-base: #FFFFFF; --surface-raised: #F8F9FA; --surface-card: #FFFFFF; --surface-elevated: #F1F3F5; --surface-overlay: #D7D7D7; --surface-modal: #EAE5DC; --text-primary: #212529; --text-secondary: rgba(26, 24, 20, 0.72); --text-tertiary: rgba(26, 24, 20, 0.62); --text-inverse: #F5F0E8; --accent: #FF7C4F; --accent-dim: rgba(232, 98, 10, 0.12); --accent-glow: rgba(232, 98, 10, 0.20); --accent-text: #E46C43; /* Semantic text darkened for ≥4.5:1 on light surfaces. Hue preserved. */ --status-active-text: oklch(0.52 0.13 158); --status-flagged-text: oklch(0.55 0.18 25); --status-warning-text: oklch(0.55 0.12 70); --status-review-text: oklch(0.52 0.18 275); --status-in-progress-text: oklch(0.55 0.13 60); --status-info-text: oklch(0.52 0.13 245); --status-idle-text: var(--text-secondary); } /* Paint the app root from the active theme (scoped — never touches the WP page). */ .takeoff-wp-app { color: var(--text-primary); background-color: var(--surface-base); } /* ── Static tokens (theme-agnostic) ───────────────────────────────────────── Global on :root; declarations only, they paint nothing until referenced. */ :root { --titlebar-height: 0px; /* Semantic Colors — single source of truth */ --status-active: #3DD68C; /* success / online / done */ --status-idle: #6B6B6B; /* idle / neutral / inactive */ --status-flagged: #E5484D; /* error / flagged / overdue */ --status-flagged-solid: #C42B3A; /* solid red behind white text (danger btns) */ --status-warning: #F5A623; /* warning / on-hold / caution */ --status-review: #818CF8; /* in review (indigo) */ --status-in-progress: #F59E0B; /* in progress (amber) */ --status-info: #4A90D9; /* info / invoiced / billed (blue) */ --color-blue: var(--status-info); /* Dark ink for text/icons ON bright fills (accent, amber). Theme-independent. */ --on-accent: #111110; /* Soft background tints (chips, pills, row washes). */ --status-active-soft: color-mix(in srgb, var(--status-active) 15%, transparent); --status-idle-soft: color-mix(in srgb, var(--status-idle) 18%, transparent); --status-flagged-soft: color-mix(in srgb, var(--status-flagged) 15%, transparent); --status-warning-soft: color-mix(in srgb, var(--status-warning) 15%, transparent); --status-review-soft: color-mix(in srgb, var(--status-review) 15%, transparent); --status-in-progress-soft: color-mix(in srgb, var(--status-in-progress) 15%, transparent); --status-info-soft: color-mix(in srgb, var(--status-info) 15%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent); --accent-wash: color-mix(in srgb, var(--accent) 5%, transparent); /* Text-on-soft variants (dark-theme defaults; light overrides above). */ --status-active-text: var(--status-active); --status-idle-text: var(--text-secondary); --status-flagged-text: var(--status-flagged); --status-warning-text: var(--status-warning); --status-review-text: var(--status-review); --status-in-progress-text: var(--status-in-progress); --status-info-text: var(--status-info); --priority-low: var(--text-tertiary); --priority-medium: var(--status-in-progress); --priority-high: #F97316; --priority-urgent: var(--status-flagged); --productive: var(--accent); --idle-time: #4A4845; --flagged-time: #E5484D; /* Deterministic Avatar Colors (warm, muted) */ --avatar-color-1: #E89C81; --avatar-color-2: #D4A373; --avatar-color-3: #A3B18A; --avatar-color-4: #E29578; --avatar-color-5: #CDB4DB; --avatar-color-6: #8B9DA3; /* Categorical chart scale (OKLCH, evenly spaced hues) */ --chart-1: oklch(0.74 0.11 40); --chart-2: oklch(0.78 0.10 75); --chart-3: oklch(0.76 0.10 140); --chart-4: oklch(0.74 0.09 190); --chart-5: oklch(0.72 0.10 235); --chart-6: oklch(0.70 0.11 275); --chart-7: oklch(0.74 0.11 320); --chart-8: oklch(0.72 0.13 10); /* Typography */ --font-display: "DM Serif Display", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --text-display-size: 32px; --text-display-weight: 400; --text-display-line-height: 1.2; --text-heading-size: 20px; --text-heading-weight: 500; --text-heading-line-height: 1.3; --text-heading-letter-spacing: -0.02em; --text-subheading-size: 14px; --text-subheading-weight: 600; --text-subheading-line-height: 1.4; --text-body-size: 14px; --text-body-weight: 400; --text-body-line-height: 1.6; --text-small-size: 12px; --text-small-weight: 400; --text-small-line-height: 1.5; --text-timer-size: 48px; --text-timer-weight: 400; --text-timer-line-height: 1.0; --text-stat-size: 28px; --text-stat-weight: 300; --text-stat-line-height: 1.1; /* Spacing (8px base grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Layout & Border Radii */ --sidebar-width: 220px; --sidebar-collapsed: 64px; --content-max-width: 1200px; --radius-card: 10px; --radius-button: 8px; --radius-input: 8px; --radius-pill: 9999px; --topbar-height: 56px; /* Semantic Z-Index Scale */ --z-sticky: 100; --z-topbar: 200; --z-drawer-scrim: 300; --z-drawer: 310; --z-overlay: 350; --z-modal-backdrop: 400; --z-modal: 410; --z-popover: 450; --z-toast: 500; --z-tooltip: 600; --z-lightbox: 650; --z-titlebar: 700; /* Elevation */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); --shadow-panel: -8px 0 32px rgba(0,0,0,0.12); --elevation-1: 0 4px 12px rgba(0, 0, 0, 0.05); --elevation-2: var(--shadow-sm); --elevation-3: var(--shadow-md); --elevation-accent: 0 4px 20px var(--accent-glow); /* Focus ring */ --focus-ring-inset: inset 0 0 0 2px var(--accent); --focus-ring: 0 0 0 3px rgba(255, 154, 61, 0.4); /* Motion — ease-out only (no bounce/overshoot/spring) */ --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); --ease-exit: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: var(--ease-out); --duration-instant: 80ms; --duration-fast: 150ms; --duration-standard: 250ms; --duration-slow: 400ms; --duration-enter: 350ms; --duration-exit: 200ms; --duration-data: 500ms; --duration-count: 800ms; } /* ── Base reset / typography (scoped to the app) ──────────────────────────── Ported from reference web/src/index.css, scoped under .takeoff-wp-app so it does not fight the WordPress theme's own resets. */ .takeoff-wp-app, .takeoff-wp-app *, .takeoff-wp-app *::before, .takeoff-wp-app *::after { box-sizing: border-box; } .takeoff-wp-app { font-family: var(--font-body); font-size: var(--text-body-size); line-height: 1.5; font-weight: 400; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scrollbar-width: thin; scrollbar-color: var(--surface-overlay) transparent; } /* Custom scrollbars (WebKit) */ .takeoff-wp-app ::-webkit-scrollbar { width: 6px; height: 6px; } .takeoff-wp-app ::-webkit-scrollbar-track { background: transparent; } .takeoff-wp-app ::-webkit-scrollbar-thumb { background: var(--surface-overlay); border-radius: 999px; } .takeoff-wp-app ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* Text overflow utilities */ .takeoff-wp-app .tak-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .takeoff-wp-app .tak-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Global reduced-motion guard (scoped). */ @media (prefers-reduced-motion: reduce) { .takeoff-wp-app *, .takeoff-wp-app *::before, .takeoff-wp-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }