/*
 * agents-theme.css — "Box Office" design tokens for the SeatCommons ops
 * dashboard (src/dashboard/*.html).
 *
 * SOURCE OF TRUTH: the buyer app's green Box Office system,
 * ticketing-frontend/lib/design/tokens.ts (palettes.light / palettes.dark,
 * spacing, radii, fontFamilyNames, typography, touchTarget). Brand green is
 * #1DB954; the spacing grid is 4px. Every value below is copied from there —
 * do not invent new colors here, change tokens.ts and re-copy.
 *
 * Light is always the default — dark only applies via an explicit toggle
 * (:root[data-theme="dark"]), never from the OS/browser color-scheme
 * preference. agents-theme.js's pre-paint IIFE is the only thing that sets
 * data-theme, and it defaults to "light" when nothing is saved. There is no
 * :root[data-theme="light"] block: it would be byte-identical to :root.
 *
 * Legacy variable NAMES already used across the 12 dashboard pages
 * (--bg, --surface, --surface-2, --surface-3, --border, --text, --text-muted,
 * --muted, --green, --green-dim, --green-soft, --blue, --amber, --red,
 * --radius, --violet, …) are kept and repointed to the tokens below. Do NOT
 * rename them: per-page <style> blocks and JS template strings consume them
 * as-is. Values change; names never do.
 */

/* ── Self-hosted variable fonts (copied from the buyer app) ───────────────
   Served by express.static at /dashboard-assets (server.ts:949) — the fonts/
   subdirectory is served automatically. Licences: assets/fonts/Inter-OFL.txt,
   assets/fonts/Archivo-OFL.txt. Inter is the body/display face; Archivo and
   ArchivoExpanded stay loaded only for the brand lockup and sidebar nav
   (--font-nav, --font-nav-display), which keep their original look. */
@font-face {
  font-family: "Inter";
  src: url("/dashboard-assets/fonts/InterVariable.woff2") format("woff2"),
       url("/dashboard-assets/fonts/InterVariable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("/dashboard-assets/fonts/Archivo-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ArchivoExpanded";
  src: url("/dashboard-assets/fonts/ArchivoExpanded-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Brand ramp (shared by both themes) ---- */
  --brand-50: #E8FBEF;
  --brand-100: #CBF7D9;
  --brand-200: #98EFB4;
  --brand-300: #5EE285;
  --brand-400: #2ED566;
  --brand-500: #1DB954;
  --brand-600: #159947;
  --brand-700: #117A3B;
  --brand-800: #0F6132;
  --brand-900: #0B4525;

  /* ---- Primary (light) ---- */
  --brand-primary: #15803D;
  --brand-primary-onsolid: #FFFFFF;
  --brand-primary-hover: #166534;
  --brand-primary-pressed: #14532D;
  --brand-primary-disabled: #82C99B;
  --brand-primary-subtle: #EAF8EF;
  --brand-primary-border: #A8DFBA;
  --brand-primary-soft: rgba(21, 128, 61, 0.14);

  /* ---- Accent (light) ---- accent-solid is a FILL color; pair it with
     accent-onsolid ink. accent-text is accent used AS text on light surfaces. */
  --accent-solid: #1DB954;
  --accent-onsolid: #07120B;
  --accent-text: #117A3B;
  --accent-subtle: #E8FBEF;

  /* ---- Semantic ---- deliberately distinct from --brand-primary.
     *-ink variants are the AA-safe text color for use on the matching *-bg
     tint (plain --warning on --warning-bg is only 4.42:1). */
  --success: #167A4A;
  --success-bg: #E4F4EC;
  --success-ink: #0F5B37;
  --warning: #B4520A;
  --warning-bg: #FCEDE1;
  --warning-ink: #8F4308;
  --danger: #C02525;
  --danger-bg: #FBE7E7;
  --danger-ink: #961D1D;
  --info: #1D6FB8;
  --info-bg: #E5F0FA;
  --info-ink: #17568F;

  /* ---- Surfaces (light) ---- */
  --surface-bg: #F8FBF9;
  --surface-bg-subtle: #EFF5F1;
  --surface-card: #FFFFFF;
  --surface-card-alt: #F4F8F5;
  --surface-elevated: #FFFFFF;
  --surface-border: #CDDCD1;
  --surface-border-strong: #9FB8A7;
  --surface-scrim: rgba(7, 18, 11, 0.58);

  /* ---- Text (light) ---- */
  --text-primary: #0D1F14;
  --text-secondary: #405548;
  --text-muted-c: #627368;
  --text-inverse: #FFFFFF;

  /* Supplementary categorical accent used for chart series (analytics.html) */
  --violet: #6D5BD0;

  /* ---- Legacy dashboard variable names → Box Office tokens ---- */
  --bg: var(--surface-bg);
  --surface: var(--surface-card);
  --surface-2: var(--surface-card-alt);
  --surface2: var(--surface-card-alt);
  --surface-3: var(--surface-elevated);
  --border: var(--surface-border);
  --text: var(--text-primary);
  --text-muted: var(--text-muted-c);
  --muted: var(--text-muted-c);

  /* legacy "--green" was dual-purpose (brand chrome AND a status color);
     under the Box Office system the brand IS green, so both readings now
     land on the same hue. */
  --green: var(--brand-primary);
  --green-dim: var(--brand-primary-disabled);
  --green-soft: var(--brand-primary-soft);

  --blue: var(--info);
  --amber: var(--warning);
  --red: var(--danger);

  /* ---- Typography ---- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Navigation titles only: the sidebar links and group titles (--font-nav)
     and the "SeatCommons" brand name in the top bar (--font-nav-display).
     Both keep the faces they had before the move to Inter. */
  --font-nav: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-nav-display: "ArchivoExpanded", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 12px floor, matching the buyer app (typography.tiny is deliberately absent) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;

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

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  /* legacy alias — 59 usages across the pages */
  --radius: var(--radius-md);

  /* ---- Control heights (touchTarget: 36 / 44 / 52) ---- */
  --control-h-sm: 36px;
  --control-h-md: 44px;
  --control-h-lg: 52px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(13, 31, 20, 0.06), 0 1px 3px rgba(13, 31, 20, 0.08);
  --shadow-md: 0 4px 10px rgba(13, 31, 20, 0.08), 0 2px 4px rgba(13, 31, 20, 0.06);
  --shadow-lg: 0 12px 30px rgba(13, 31, 20, 0.12), 0 4px 10px rgba(13, 31, 20, 0.08);
  --focus-ring: 0 0 0 3px var(--brand-primary-soft);

  /* ---- Shell layout ---- */
  --header-h: 64px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 64px;

  /* ---- Stacking ---- */
  --z-header: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---- Queue priority ramp ---- */
  --priority-critical: var(--danger);
  --priority-high: var(--warning);
  --priority-medium: var(--accent-solid);
  --priority-low: var(--info);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-primary: #1ED760;
  --brand-primary-onsolid: #07120B;
  --brand-primary-hover: #3BE477;
  --brand-primary-pressed: #18B852;
  --brand-primary-disabled: #265C3A;
  --brand-primary-subtle: rgba(30, 215, 96, 0.14);
  --brand-primary-border: rgba(30, 215, 96, 0.42);
  --brand-primary-soft: rgba(30, 215, 96, 0.20);

  --accent-solid: #1ED760;
  --accent-onsolid: #07120B;
  --accent-text: #65E58F;
  --accent-subtle: rgba(30, 215, 96, 0.14);

  --success: #4ADE9A;
  --success-bg: rgba(74, 222, 154, 0.14);
  --success-ink: #4ADE9A;
  --warning: #F0A94A;
  --warning-bg: rgba(240, 169, 74, 0.14);
  --warning-ink: #F0A94A;
  --danger: #FF7A7A;
  --danger-bg: rgba(255, 122, 122, 0.14);
  --danger-ink: #FF7A7A;
  --info: #6BB6F0;
  --info-bg: rgba(107, 182, 240, 0.14);
  --info-ink: #6BB6F0;

  --surface-bg: #090D0B;
  --surface-bg-subtle: #0F1511;
  --surface-card: #151C17;
  --surface-card-alt: #19221C;
  --surface-elevated: #202A23;
  --surface-border: rgba(255, 255, 255, 0.10);
  --surface-border-strong: rgba(255, 255, 255, 0.20);
  --surface-scrim: rgba(2, 8, 4, 0.68);

  --text-primary: #F2F6F3;
  --text-secondary: #B2BDB5;
  --text-muted-c: #9BA89F;
  --text-inverse: #07120B;

  --violet: #A78BFA;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.62), 0 6px 14px rgba(0, 0, 0, 0.44);
}