/* My Time Tracking – design tokens. Every colour, radius, shadow and font lives here; components only use the tokens.
   Brand colours come from branding.json via /brand.css (loaded after this file) – change the brand there, not here.
   Brand sheet "My Time Tracking" (17.10.2026): Primary Blue #2563EB (buttons, highlights), Light Blue #3B82F6 (hover, active), Cyan #06B6D4 (accents),
   Success Green #22C55E (confirmations, check, online), Dark Blue #0F172A (headings, text), Gray #6B7280 (secondary text, icons), Light Gray #F1F5F9
   (backgrounds), White. Light sidebar with a blue active pill, white cards. Font: Inter (self-hosted, OFL). Light first, dark as a tested variant
   (data-mode="dark"). Text contrast >= 4.5:1 (white text on green only on the darker #16A34A). */
:root {
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 30px;

  --brand: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-400: #60a5fa; --brand-900: #0f172a; --brand-bright: #06b6d4;
  --brand-50: color-mix(in srgb, var(--brand) 8%, #fff); --brand-100: color-mix(in srgb, var(--brand) 16%, #fff);
  --accent: #06b6d4; --accent-600: #0891b2; --accent-ink: #0e7490; --accent-50: color-mix(in srgb, var(--accent) 10%, #fff);
  --primary: var(--brand-600); --primary-hover: var(--brand-700); --primary-soft: #eff6ff; --on-primary: #ffffff;
  /* hero banner (Home, Dashboard): dark blue → primary blue → cyan */
  --hero-from: #0f172a; --hero-mid: var(--brand-600); --hero-to: var(--accent);
  --grad: linear-gradient(120deg, var(--hero-from) 0%, var(--hero-mid) 62%, var(--hero-to) 100%);
  --hero-ink: #ffffff; --hero-ink-2: rgba(255, 255, 255, .88); --hero-btn-bg: #ffffff; --hero-btn-ink: #0f172a;
  --grad-primary: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%);
  --grad-bar: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 100%);

  /* sidebar (brand sheet dashboard): white, slate labels, solid primary-blue pill for the active item */
  --sb-bg: #ffffff; --sb-text: #334155; --sb-muted: #6b7280; --sb-strong: #0f172a; --sb-hover: #f1f5f9;
  --sb-active: #2563eb; --sb-active-ink: #ffffff; --sb-line: #e5e7eb; --sb-soft: #f8fafc; --sb-chip: #eff6ff; --sb-chip-ink: #1d4ed8;

  --bg: #f6f8fb; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --overlay: rgba(15, 23, 42, .45);
  --border: #e5e7eb; --border-strong: #d1d5db; --focus: var(--brand-400);
  --text: #0f172a; --text-2: #334155; --text-3: #5b6474;
  --th-bg: #f8fafc; --th-ink: #5b6474;

  --success: #047857; --success-bg: #ecfdf5; --warning: #b45309; --warning-bg: #fffbeb; --danger: #b91c1c; --danger-bg: #fef2f2; --info: #1d4ed8; --info-bg: #eff6ff; --neutral-bg: #f1f5f9;
  /* status pills (spec 14.6): gray = all, light blue = draft / open / info, yellow / orange = pending / hint, green = approved / closed / ok,
     red = rejected / Working Hours Act warning */
  --st-planned: #1d4ed8; --st-planned-bg: #e0ecff; --st-progress: #b45309; --st-progress-bg: #fffbeb; --st-done: #047857; --st-done-bg: #ecfdf5;
  --st-cancelled: #b91c1c; --st-cancelled-bg: #fef2f2; --st-neutral: #475569; --st-neutral-bg: #f1f5f9;
  --av-bg: linear-gradient(135deg, #2563eb, #06b6d4); --av-ink: #ffffff;
  /* buttons (spec 14.5): green = clock in / create / save / approve, red = clock out / delete / reject, blue-purple = PDF / preview / export / info,
     light blue = back / secondary */
  --btn-create: #16a34a; --btn-create-hover: #15803d; --btn-delete: #dc2626; --btn-delete-hover: #b91c1c; --btn-pdf: #2563eb; --btn-pdf-hover: #1d4ed8;
  --btn-back: #ffffff; --btn-back-text: #1d4ed8; --btn-back-border: #bfd3f8; --btn-back-hover: #eff6ff;
  /* clock button (Today) */
  --clock-in-from: #4ade80; --clock-in-to: #16a34a; --clock-in-ring: #dcfce7; --clock-in-ring2: #f0fdf4;
  --clock-out-from: #f87171; --clock-out-to: #dc2626; --clock-out-ring: #fee2e2; --clock-out-ring2: #fef2f2;
  --clock-break-from: #fbbf24; --clock-break-to: #d97706; --clock-break-ring: #fef3c7; --clock-break-ring2: #fffbeb;
  /* chart series */
  --c-1: #2563eb; --c-2: #22c55e; --c-3: #06b6d4; --c-4: #6b7280; --c-5: #f472b6; --c-6: #f59e0b; --c-other: #94a3b8; --c-prev: #cbd5e1;

  --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px #e9edf3; --shadow-lg: 0 16px 48px rgba(15, 23, 42, .18);
  --sidebar-w: 248px; --topbar-h: 64px; --gap: 18px; --input-h: 42px; --bottom-nav-h: 64px;
  color-scheme: light;
}
[data-mode="dark"] {
  --brand-50: color-mix(in srgb, var(--brand-400) 16%, #0b1220); --brand-100: color-mix(in srgb, var(--brand-400) 28%, #0b1220);
  --primary: #60a5fa; --primary-hover: #93c5fd; --primary-soft: rgba(96, 165, 250, .16); --on-primary: #0b1220;
  --accent-50: color-mix(in srgb, var(--accent) 18%, transparent); --accent-ink: #67e8f9;
  --hero-from: #0b1220; --hero-mid: #1e40af; --hero-to: #0e7490; --hero-btn-bg: #eff6ff; --hero-btn-ink: #0f172a;
  --sb-bg: #0b1220; --sb-text: #cbd5e1; --sb-muted: #94a3b8; --sb-strong: #ffffff; --sb-hover: rgba(255, 255, 255, .06); --sb-active: #2563eb;
  --sb-line: rgba(255, 255, 255, .08); --sb-soft: rgba(255, 255, 255, .04); --sb-chip: rgba(96, 165, 250, .16); --sb-chip-ink: #bfdbfe;
  --bg: #0b1220; --surface: #111a2e; --surface-2: #152036; --surface-3: #1c2942; --overlay: rgba(0, 0, 0, .6);
  --border: #24324d; --border-strong: #31415f; --focus: #93c5fd;
  --text: #e8edf6; --text-2: #bfc9da; --text-3: #97a3b8;
  --th-bg: #152036; --th-ink: #a7b1c4;
  --success: #6ee7b7; --success-bg: rgba(52, 211, 153, .13); --warning: #fcd34d; --warning-bg: rgba(251, 191, 36, .13); --danger: #fca5a5; --danger-bg: rgba(248, 113, 113, .14); --info: #bfdbfe; --info-bg: rgba(96, 165, 250, .16); --neutral-bg: #1c2942;
  --st-planned: #93c5fd; --st-planned-bg: rgba(96, 165, 250, .16); --st-progress: #fcd34d; --st-progress-bg: rgba(251, 191, 36, .14); --st-done: #6ee7b7; --st-done-bg: rgba(52, 211, 153, .14);
  --st-cancelled: #fca5a5; --st-cancelled-bg: rgba(248, 113, 113, .16); --st-neutral: #c0c8dc; --st-neutral-bg: rgba(148, 163, 184, .16);
  --btn-create: #059669; --btn-create-hover: #047857; --btn-delete: #dc2626; --btn-delete-hover: #b91c1c; --btn-pdf: #2563eb; --btn-pdf-hover: #1d4ed8;
  --btn-back: transparent; --btn-back-text: #bfdbfe; --btn-back-border: #3b5a8f; --btn-back-hover: rgba(96, 165, 250, .12);
  --clock-in-ring: rgba(52, 211, 153, .22); --clock-in-ring2: rgba(52, 211, 153, .1); --clock-out-ring: rgba(248, 113, 113, .22); --clock-out-ring2: rgba(248, 113, 113, .1);
  --clock-break-ring: rgba(251, 191, 36, .22); --clock-break-ring2: rgba(251, 191, 36, .1);
  --c-prev: #334155;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 1px #22304a; --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-density="compact"] { --input-h: 36px; --gap: 12px; }