/* =====================================================================
   tokens.css – THE ONLY PLACE WITH COLOUR VALUES.
   Loaded first (after Bootstrap). site.css and theme.css use only these
   names (var(--…)); they never write a colour of their own, and there are
   no inline styles in views or JS. A new theme = new values here.

   1. Light (default)            :root
   2. Accent colours             html[data-accent="teal"] …   (theme.js)
   3. Dark                       html[data-theme="dark"]       (theme.js)
   4. Bootstrap mapped to tokens (both modes)
   ===================================================================== */

/* ---------- 1. Light (default) ---------- */
:root {
  /* Brand (= accent "navy") */
  --brand: #1f4e79;
  --brand-dark: #163a5a;
  --brand-soft: #e8f0f8;
  --brand-rgb: 31, 78, 121;
  --brand-text: var(--brand);        /* brand-coloured text and icons (lighter in dark mode) */
  --accent: #0ea5a4;

  /* Surfaces and text */
  --page-bg: #f4f6f9;
  --card-bg: #ffffff;
  --surface-2: #fbfcfd;              /* table heads, form sections, soft panels */
  --surface-3: #f8fafc;              /* weekend columns, locked cards */
  --surface-muted: #eef0f3;          /* muted badges */
  --hover-bg: #eef2f7;               /* hovered rows / buttons */
  --topbar-bg: rgba(255, 255, 255, .92);
  --border: #e3e7ed;
  --text: #1f2937;
  --text-muted: #6b7280;
  --heading: #111827;

  /* Form fields */
  --input-bg: #ffffff;
  --input-disabled-bg: #f1f3f6;
  --input-text: var(--text);
  --placeholder: #9aa3af;
  --focus-border: color-mix(in srgb, var(--brand) 55%, #ffffff);
  --focus-ring: rgba(var(--brand-rgb), .15);

  /* Status colours */
  --success: #15803d;  --success-soft: #dcfce7;  --success-line: #86efac;
  --warning: #b45309;  --warning-soft: #fef3c7;  --warning-line: #fcd34d;
  --danger:  #b91c1c;  --danger-soft:  #fee2e2;  --danger-line:  #fca5a5;
  --info:    #1d4ed8;  --info-soft:    #dbeafe;  --info-line:    #93c5fd;
  --note-bg: #fffbeb;  --note-line: #d4a72c;

  /* Attendance status colours */
  --att-present: #15803d;   --att-present-soft: #dcfce7;
  --att-halfday: #a16207;   --att-halfday-soft: #fef9c3;
  --att-absent: #b91c1c;    --att-absent-soft: #fee2e2;
  --att-leave: #7c3aed;     --att-leave-soft: #ede9fe;
  --att-onduty: #0e7490;    --att-onduty-soft: #cffafe;
  --att-off: #475569;       --att-off-soft: #e2e8f0;
  --att-holiday: #be185d;   --att-holiday-soft: #fce7f3;
  --att-pending: #b45309;   --att-pending-soft: #fef3c7;
  --att-missing: #c2410c;   --att-missing-soft: #ffedd5;
  --att-notmarked: #6b7280; --att-notmarked-soft: #f3f4f6;

  /* Side menu (always on a brand-coloured background) */
  --sidebar-bg: linear-gradient(180deg, var(--brand-dark), var(--brand));
  --on-brand: #ffffff;
  --on-brand-muted: rgba(255, 255, 255, .85);
  --on-brand-line: rgba(255, 255, 255, .1);
  --on-brand-hover: rgba(255, 255, 255, .1);
  --on-brand-chip: rgba(255, 255, 255, .18);
  --nav-active-bg: #ffffff;
  --nav-active-text: var(--brand);
  --auth-glow: rgba(14, 165, 164, .35);
  --auth-point: #5eead4;
  --platform-bg: linear-gradient(135deg, #111827, #1f2937);
  --camera-bg: #0f172a;

  /* Shadows, overlays */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 10px 30px rgba(16, 24, 40, .12);
  --shadow-lg: 0 20px 50px rgba(16, 24, 40, .14);
  --shadow-drawer: 0 0 40px rgba(0, 0, 0, .25);
  --backdrop: rgba(15, 23, 42, .45);

  /* Theme picker swatches (one per accent) */
  --swatch-navy: #1f4e79; --swatch-teal: #0f766e; --swatch-green: #15803d; --swatch-purple: #6d28d9;
  --swatch-orange: #c2410c; --swatch-rose: #be123c; --swatch-slate: #334155;

  /* Sizes */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 60px;
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 2. Accent colours (brand = side menu, buttons, links, focus) ---------- */
html[data-accent="teal"]   { --brand: var(--swatch-teal);   --brand-dark: #0b5953; --brand-soft: #e0f2f1; --brand-rgb: 15, 118, 110; }
html[data-accent="green"]  { --brand: var(--swatch-green);  --brand-dark: #0f5f2d; --brand-soft: #e3f5e8; --brand-rgb: 21, 128, 61; }
html[data-accent="purple"] { --brand: var(--swatch-purple); --brand-dark: #521fa3; --brand-soft: #efe8fc; --brand-rgb: 109, 40, 217; }
html[data-accent="orange"] { --brand: var(--swatch-orange); --brand-dark: #93310a; --brand-soft: #fdeee6; --brand-rgb: 194, 65, 12; }
html[data-accent="rose"]   { --brand: var(--swatch-rose);   --brand-dark: #8f0e2d; --brand-soft: #fde8ed; --brand-rgb: 190, 18, 60; }
html[data-accent="slate"]  { --brand: var(--swatch-slate);  --brand-dark: #1e293b; --brand-soft: #e9edf2; --brand-rgb: 51, 65, 85; }

/* ---------- 3. Dark ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --brand-soft: rgba(var(--brand-rgb), .22);
  --brand-text: color-mix(in srgb, var(--brand) 45%, #ffffff);

  --page-bg: #0f172a;
  --card-bg: #162033;
  --surface-2: #1b2740;
  --surface-3: #18233a;
  --surface-muted: rgba(148, 163, 184, .16);
  --hover-bg: #24324d;
  --topbar-bg: rgba(22, 32, 51, .92);
  --border: #2b3a52;
  --text: #e5e9f0;
  --text-muted: #9aa6b8;
  --heading: #f1f5f9;

  --input-bg: #111a2b;
  --input-disabled-bg: #0d1524;
  --placeholder: #6b7a90;
  --focus-border: color-mix(in srgb, var(--brand) 70%, #ffffff);
  --focus-ring: rgba(var(--brand-rgb), .35);

  --success: #4ade80;  --success-soft: rgba(34, 197, 94, .16);  --success-line: rgba(34, 197, 94, .4);
  --warning: #fbbf24;  --warning-soft: rgba(245, 158, 11, .16); --warning-line: rgba(245, 158, 11, .4);
  --danger:  #f87171;  --danger-soft:  rgba(239, 68, 68, .16);  --danger-line:  rgba(239, 68, 68, .4);
  --info:    #93c5fd;  --info-soft:    rgba(59, 130, 246, .16); --info-line:    rgba(59, 130, 246, .4);
  --note-bg: rgba(212, 167, 44, .12);  --note-line: #a07d1c;

  --att-present: #4ade80;   --att-present-soft: rgba(34, 197, 94, .18);
  --att-halfday: #facc15;   --att-halfday-soft: rgba(234, 179, 8, .18);
  --att-absent: #f87171;    --att-absent-soft: rgba(239, 68, 68, .18);
  --att-leave: #c4b5fd;     --att-leave-soft: rgba(139, 92, 246, .2);
  --att-onduty: #67e8f9;    --att-onduty-soft: rgba(6, 182, 212, .18);
  --att-off: #cbd5e1;       --att-off-soft: rgba(148, 163, 184, .18);
  --att-holiday: #f9a8d4;   --att-holiday-soft: rgba(236, 72, 153, .18);
  --att-pending: #fbbf24;   --att-pending-soft: rgba(245, 158, 11, .18);
  --att-missing: #fdba74;   --att-missing-soft: rgba(249, 115, 22, .18);
  --att-notmarked: #9aa6b8; --att-notmarked-soft: rgba(148, 163, 184, .14);

  --sidebar-bg: linear-gradient(180deg, #0b1220, color-mix(in srgb, var(--brand) 55%, #0b1220));
  --nav-active-bg: rgba(255, 255, 255, .92);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .5);
  --backdrop: rgba(0, 0, 0, .6);
  --close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- 4. Bootstrap mapped to the tokens (works in both modes) ---------- */
:root, html[data-theme="dark"] {
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--heading);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-body-font-family: var(--font);
}
html[data-theme="dark"] { --bs-link-color: var(--brand-text); --bs-link-hover-color: var(--heading); }