/*
 * xin-vision-server design tokens (docs/ARCHITECTURE.md §11.7).
 *
 * Token NAMES are binding for every page stylesheet; values are the shell's choice. This is the only file
 * that may contain raw colour literals. Page CSS (reports.css, admin.css) uses var(--…) only.
 *
 * Principle: the chrome is ink on cool paper; colour is reserved for meaning (attendance status, alerts,
 * data). Status colours were validated with the dataviz palette checks in this order:
 * present, late, early_leave, incomplete, absent, leave, holiday (adjacent CVD ΔE ≥ 12.9, normal ≥ 15.5).
 * Late (amber) is below 3:1 on white, so it always ships with text or its code letter.
 */
:root {
  color-scheme: light;

  /* Surfaces and ink */
  --color-bg: #f3f5f8;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fb;
  --color-surface-3: #eef1f5;
  --color-border: #dfe3ea;
  --color-border-strong: #c3cad5;
  --color-text: #172031;
  --color-text-muted: #5a6576;
  --color-text-subtle: #5f6a7c;
  --color-overlay: rgba(14, 20, 33, 0.48);

  /* Actions and feedback */
  --color-primary: #2b52d0;
  --color-primary-hover: #2245b4;
  --color-primary-active: #1c3a99;
  --color-primary-contrast: #ffffff;
  --color-primary-bg: #e9eefc;
  --color-primary-ink: #2146b5;
  --color-focus: #2b52d0;
  --color-success: #1e8e3e;
  --color-success-bg: #e7f4ea;
  --color-success-ink: #146c2e;
  --color-warning: #d18f00;
  --color-warning-bg: #fff3d1;
  --color-warning-ink: #7a5200;
  --color-danger: #d42c2c;
  --color-danger-hover: #b52222;
  --color-danger-bg: #fde8e8;
  --color-danger-ink: #a51b1b;
  --color-info: #1f74c9;
  --color-info-bg: #e6f0fb;
  --color-info-ink: #175a9e;
  --color-neutral: #8a94a6;
  --color-neutral-bg: #eef1f5;
  --color-neutral-ink: #4b5565;

  /* The ink frame (sidebar, bare layout backdrop) */
  --color-ink: #121a2b;
  --color-ink-2: #1c2639;
  --color-ink-3: #27324a;
  --color-ink-line: #26314a;
  --color-ink-text: #c9d1de;
  --color-ink-muted: #8b96aa;
  --color-ink-strong: #ffffff;
  --color-ink-accent: #7fa3ff;

  /* Attendance status: mark colour, tinted background, and text ink on the tint (WCAG AA) */
  --status-present: #1e8e3e;
  --status-present-bg: #e7f4ea;
  --status-present-ink: #146c2e;
  --status-late: #e6a700;
  --status-late-bg: #fff3d1;
  --status-late-ink: #7a5200;
  --status-early_leave: #b45309;
  --status-early_leave-bg: #fbeadb;
  --status-early_leave-ink: #8a3c05;
  --status-incomplete: #d6409f;
  --status-incomplete-bg: #fbe8f3;
  --status-incomplete-ink: #9b2373;
  --status-absent: #dc2626;
  --status-absent-bg: #fde8e8;
  --status-absent-ink: #a51b1b;
  --status-pending: #8a94a6;
  --status-pending-bg: #eef1f5;
  --status-pending-ink: #4b5565;
  --status-holiday: #0891b2;
  --status-holiday-bg: #e0f3f8;
  --status-holiday-ink: #0b6a82;
  --status-leave: #6d5ae6;
  --status-leave-bg: #eeebfc;
  --status-leave-ink: #4f3bc4;
  --status-weekend: #b4bcc8;
  --status-weekend-bg: #f1f3f6;
  --status-weekend-ink: #5d6878;

  /* Categorical slots (identity: cameras, leave types, series). Fixed order, never cycled. */
  --cat-1: #2a78d6;
  --cat-2: #eb6834;
  --cat-3: #1baf7a;
  --cat-4: #eda100;
  --cat-5: #e87ba4;
  --cat-6: #008300;
  --cat-7: #6250d6;
  --cat-8: #e34948;
  --cat-ink: #172031;

  /* Avatar initials backgrounds (with --color-text ink, all ≥ 7:1) */
  --avatar-1: #dfe8fb;
  --avatar-2: #dff3ea;
  --avatar-3: #fbe9dc;
  --avatar-4: #efe7fb;
  --avatar-5: #fbe6ee;
  --avatar-6: #e2eef3;

  /* Charts */
  --chart-surface: #ffffff;
  --chart-grid: #e8ebf0;
  --chart-axis: #c3cad5;
  --chart-label: #5a6576;
  --chart-crosshair: #8a94a6;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 18px 48px rgba(16, 24, 40, 0.22), 0 2px 8px rgba(16, 24, 40, 0.08);

  /* Spacing (4 px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Type: system faces only (on-prem, no web fonts) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", "Ubuntu Sans", Ubuntu,
    Roboto, "Noto Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Ubuntu Sans Mono", "Ubuntu Mono",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed: 68px;
  --topbar-height: 56px;
  --content-max: 1440px;
  --touch-target: 36px;

  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layering */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-popover: 60;
  --z-overlay: 80;
  --z-toast: 100;
}

@media (pointer: coarse) {
  :root { --touch-target: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}