/*
 * SPARR — CSS Custom Property Token System
 * =========================================
 * This file owns ALL custom properties.
 * styles.css contains only component styles — no :root or html[data-theme] here.
 *
 * Token inventory:
 *   Backgrounds  : --color-bg, --color-surface, --color-surface-raised, --color-surface-sunken
 *   Borders      : --color-border, --color-border-strong
 *   Text         : --color-text, --color-text-muted, --color-text-faint
 *   Accent       : --color-accent, --color-accent-text, --color-accent-hover,
 *                  --color-accent-subtle, --color-accent-border
 *   Danger       : --color-danger, --color-danger-text, --color-danger-subtle, --color-danger-border
 *   Success      : --color-success, --color-success-text, --color-success-subtle, --color-success-border
 *   Warning      : --color-warning, --color-warning-text, --color-warning-subtle, --color-warning-border
 *   Info         : --color-info, --color-info-text, --color-info-subtle, --color-info-border
 *   Inputs       : --color-input-bg, --color-input-text, --color-input-border,
 *                  --color-input-focus-border, --color-input-placeholder
 *   Utility      : --color-overlay, --color-focus-ring, --color-skeleton-base, --color-skeleton-shine
 *   Shadows      : --shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
 */

/* ─── LIGHT MODE (default) ───────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg: #f2f4f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #ebeef2;

  /* Borders */
  --color-border: #dce1e8;
  --color-border-strong: #b4bbc6;

  /* Text */
  --color-text: #181c23;
  --color-text-muted: #5b6370;
  --color-text-faint: #9aa2ae;

  /* Accent — Singapore Polytechnic Maroon */
  --color-accent: #8c1b2c;
  --color-accent-text: #ffffff;
  --color-accent-hover: #6f1522;
  --color-accent-subtle: #f6e9eb;
  --color-accent-border: rgba(140, 27, 44, 0.2);

  /* Danger */
  --color-danger: #c03939;
  --color-danger-text: #ffffff;
  --color-danger-subtle: #faeaea;
  --color-danger-border: rgba(192, 57, 57, 0.22);

  /* Success */
  --color-success: #1e7d4a;
  --color-success-text: #ffffff;
  --color-success-subtle: #e8f5ee;
  --color-success-border: rgba(30, 125, 74, 0.22);

  /* Warning */
  --color-warning: #b5540c;
  --color-warning-text: #ffffff;
  --color-warning-subtle: #fdf3e7;
  --color-warning-border: rgba(181, 84, 12, 0.22);

  /* Info */
  --color-info: #1c60ab;
  --color-info-text: #ffffff;
  --color-info-subtle: #e8f1fb;
  --color-info-border: rgba(28, 96, 171, 0.22);

  /* Inputs */
  --color-input-bg: #ffffff;
  --color-input-text: #181c23;
  --color-input-border: #c8ced7;
  --color-input-focus-border: #8c1b2c;
  --color-input-placeholder: #9aa2ae;

  /* Utility */
  --color-overlay: rgba(0, 0, 0, 0.46);
  --color-focus-ring: rgba(140, 27, 44, 0.26);
  --color-skeleton-base: #e9ecef;
  --color-skeleton-shine: #f4f6f8;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.09), 0 2px 5px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.11), 0 3px 10px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.13), 0 8px 18px rgba(0, 0, 0, 0.08);

  color-scheme: light;
}

/* ─── DARK MODE ──────────────────────────────────────────────────────────── */
html[data-theme='dark'] {
  /* Backgrounds */
  --color-bg: #0d1018;
  --color-surface: #161b25;
  --color-surface-raised: #1c2232;
  --color-surface-sunken: #111520;

  /* Borders */
  --color-border: #252d3e;
  --color-border-strong: #3b4558;

  /* Text */
  --color-text: #e5e8ef;
  --color-text-muted: #8791a4;
  --color-text-faint: #4e5668;

  /* Accent */
  --color-accent: #c4394f;
  --color-accent-text: #ffffff;
  --color-accent-hover: #de4560;
  --color-accent-subtle: #26121a;
  --color-accent-border: rgba(196, 57, 79, 0.3);

  /* Danger */
  --color-danger: #e05349;
  --color-danger-text: #ffffff;
  --color-danger-subtle: #271412;
  --color-danger-border: rgba(224, 83, 73, 0.3);

  /* Success */
  --color-success: #38a96d;
  --color-success-text: #ffffff;
  --color-success-subtle: #0d2318;
  --color-success-border: rgba(56, 169, 109, 0.3);

  /* Warning */
  --color-warning: #e8a62e;
  --color-warning-text: #1a1000;
  --color-warning-subtle: #221b08;
  --color-warning-border: rgba(232, 166, 46, 0.3);

  /* Info */
  --color-info: #4d91db;
  --color-info-text: #ffffff;
  --color-info-subtle: #0b1d31;
  --color-info-border: rgba(77, 145, 219, 0.3);

  /* Inputs */
  --color-input-bg: #111520;
  --color-input-text: #e5e8ef;
  --color-input-border: #2b3346;
  --color-input-focus-border: #c4394f;
  --color-input-placeholder: #4e5668;

  /* Utility */
  --color-overlay: rgba(0, 0, 0, 0.66);
  --color-focus-ring: rgba(196, 57, 79, 0.34);
  --color-skeleton-base: #1c2232;
  --color-skeleton-shine: #232b3c;

  /* Shadows (stronger in dark — surfaces need definition) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.36);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.62), 0 8px 18px rgba(0, 0, 0, 0.44);

  color-scheme: dark;
}

/* ─── Bootstrap primary-colour override (prevents blue focus rings globally) */
:root {
  --bs-primary: #8c1b2c;
  --bs-primary-rgb: 140, 27, 44;
  --bs-focus-ring-color: rgba(140, 27, 44, 0.26);
}

html[data-theme='dark'] {
  --bs-primary: #c4394f;
  --bs-primary-rgb: 196, 57, 79;
  --bs-focus-ring-color: rgba(196, 57, 79, 0.34);
}

/* ─── CHART PALETTE — semantic, per-series colours ──────────────────────────
 * Kept in tokens so they adapt per theme and can be read by populateAudits.js
 * via getComputedStyle(). One token per chart series, globally unique so
 * simultaneous charts don't share the same hue.
 *
 *  Chart 1 — Hourly line:  reports (maroon) | claims (blue)
 *  Chart 2 — Lost/Found:   lost (red)       | found (teal)
 *  Chart 3 — Claim status: approved (green) | rejected (orange) | pending (indigo)
 *  Chart 4 — Audit area:   events (violet)
 */

/* Light mode */
:root {
  --chart-reports: #8c1b2c; /* SP maroon — brand primary */
  --chart-claims: #2563eb; /* royal blue */
  --chart-lost: #ea580c; /* orange (distinct from red) */
  --chart-found: #0891b2; /* cyan-teal */
  --chart-approved: #16a34a; /* green */
  --chart-rejected: #dc2626; /* bright red (distinct from maroon) */
  --chart-pending: #6366f1; /* indigo */
  --chart-events: #7c3aed; /* violet (unique across all charts) */
}

/* Dark mode — lighter tints to read on dark backgrounds */
html[data-theme='dark'] {
  --chart-reports: #c4394f;
  --chart-claims: #60a5fa;
  --chart-lost: #fb923c;
  --chart-found: #22d3ee;
  --chart-approved: #4ade80;
  --chart-rejected: #f87171;
  --chart-pending: #a5b4fc;
  --chart-events: #c4b5fd;
}