/* TAK Studio Time Tracking — Design System Tokens */
/* Generated by packages/tak-ui/tokens/build.mjs — do not edit by hand */

/* Default (dark) theme — overridden by explicit data-theme attribute below */
:root {
  --titlebar-height: 0px;

  --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)
     surfaces, not only the base ground. 0.5 failed on cards (4.4:1) / elevated (4.1: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;

  color: var(--text-primary);
  background-color: var(--surface-base);
}

body {
  color: var(--text-primary);
  background-color: var(--surface-base);
}

:root[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);
  --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;
}

:root[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 (the saturated dark-mode
     values are too light to read as text on near-white). 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);
}

:root {

  /* ── Semantic Colors — single source of truth ───────────────────────────
     One canonical value per concept. Consumers reference these tokens (or the
     -soft / -text variants below), never a re-hardcoded hex. */
  --status-active: #3DD68C;        /* success / online / done */
  --status-idle: #6B6B6B;          /* idle / neutral / inactive */
  --status-flagged: #E5484D;       /* error / flagged / overdue (foreground/text + soft tints) */
  --status-flagged-solid: #C42B3A; /* darker red for SOLID fills behind white text (≥4.5:1): danger buttons, error banners */
  --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); /* legacy alias — prefer --status-info */

  /* Dark ink for text/icons sitting ON bright fills (the terracotta accent, the
     amber warning). White fails contrast on both (~2.5:1 and ~1.9:1); #111110
     clears AA comfortably (~7.3:1 on accent, ~9.3:1 on amber). Theme-independent:
     never use --text-inverse here, it flips to light in light mode. */
  --on-accent: #111110;

  /* Soft background tints (chips, pills, row washes). Transparent base adapts
     to the dark/light surface behind it automatically. */
  --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. Default = the saturated color (legible on dark
     surfaces); overridden to darker values under [data-theme="light"] so badge
     text clears 4.5:1 on near-white. */
  --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 for light surfaces) */
  --avatar-color-1: #E89C81;
  /* Muted Coral */
  --avatar-color-2: #D4A373;
  /* Muted Sand */
  --avatar-color-3: #A3B18A;
  /* Muted Sage */
  --avatar-color-4: #E29578;
  /* Muted Terracotta */
  --avatar-color-5: #CDB4DB;
  /* Muted Mauve */
  --avatar-color-6: #8B9DA3;
  /* Muted Warm Grey-Blue */

  /* ── Categorical chart scale (Hybrid) ────────────────────────────────────
     Warm-anchored order, but hues are evenly spaced around the wheel and
     lightness is tuned per-hue (OKLCH) so adjacent series stay distinguishable
     in dense charts while reading as one cohesive, muted family. Cycle via
     getChartColor(i) in utils/colors.js. */
  --chart-1: oklch(0.74 0.11 40);   /* coral / terracotta */
  --chart-2: oklch(0.78 0.10 75);   /* sand / amber */
  --chart-3: oklch(0.76 0.10 140);  /* sage / green */
  --chart-4: oklch(0.74 0.09 190);  /* teal */
  --chart-5: oklch(0.72 0.10 235);  /* slate-blue */
  --chart-6: oklch(0.70 0.11 275);  /* periwinkle / indigo */
  --chart-7: oklch(0.74 0.11 320);  /* mauve / violet */
  --chart-8: oklch(0.72 0.13 10);   /* rose */

  /* Typography Scales */
  --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 Scale (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;

  /* Responsive Breakpoints (reference; live in hooks/useBreakpoint.js)
       phone   : < 768px   → drawer sidebar + top app-bar, single column
       tablet  : 768–1023  → icon-rail sidebar, stacked content
       desktop : >= 1024   → full sidebar + multi-column */
  --topbar-height: 56px;

  /* Semantic Z-Index Scale — never use bare 999/9999 */
  --z-sticky: 100;
  --z-topbar: 200;
  --z-drawer-scrim: 300;
  --z-drawer: 310;
  --z-overlay: 350;          /* full-screen route/suspense loader — above drawer, below modals */
  --z-modal-backdrop: 400;
  --z-modal: 410;
  --z-popover: 450;          /* dropdowns, date-pickers, floating menus — clear an open modal */
  --z-toast: 500;
  --z-tooltip: 600;
  --z-lightbox: 650;         /* fullscreen media viewer — above toasts/tooltips */
  --z-titlebar: 700;         /* desktop window chrome — always topmost */

  /* Elevation System */
  --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);
  /* Added slight shadow instead of relying on pure background difference */
  --elevation-2: var(--shadow-sm);
  --elevation-3: var(--shadow-md);
  --elevation-accent: 0 4px 20px var(--accent-glow);

  /* Focus ring — single vocabulary for keyboard focus. Inset variant for
     full-bleed list rows (sidebar nav, task rows, panel rows) where an outset
     ring would clip; outset glow for discrete controls. */
  --focus-ring-inset: inset 0 0 0 2px var(--accent);
  --focus-ring: 0 0 0 3px rgba(255, 154, 61, 0.4); /* accent-glow hue at 0.4 — canonical keyboard ring */

  /* Motion System — ease-out only (no bounce/overshoot/spring), per the design rule. */
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint — confident entrances */
  --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-out-quart — default for state transitions (TAKButton, fades) */
  --ease-spring: var(--ease-out); /* deprecated alias — was an overshoot spring; prefer --ease-out / --ease-enter */

  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-standard: 250ms;
  --duration-slow: 400ms; /* larger fades / layout-scale transitions */
  --duration-enter: 350ms;
  --duration-exit: 200ms;
  --duration-data: 500ms;
  --duration-count: 800ms;
}

/* ── Dev Only Role Switcher ── */
.dev-role-switcher {
  position: fixed;
  bottom: var(--space-3);
  right: var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--surface-overlay);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  opacity: 0.4;
  z-index: 100;
  transition: opacity var(--duration-instant);
}

.dev-role-switcher:hover {
  opacity: 1;
}

.dev-role-switcher button {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--surface-overlay);
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 11px;
}

.dev-role-switcher button.active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}