/* CSS Custom Properties / Design Tokens */
:root {
  /* COP aliases resolve against the selected platform theme on the root.
     Keep them here: map/workboard descendants rebind generic component tokens. */
  --cop-paper: var(--bg-card);
  --cop-paper-soft: var(--bg-secondary);
  --cop-ink: var(--text-primary);
  --cop-muted: var(--text-secondary);
  --cop-line: var(--border-primary);
  --cop-focus: var(--border-focus);
  /* The emphasized command surface is the theme's own chrome (its secondary
     surface with primary ink), never the button color: a button-colored block
     the size of a panel reads as a foreign dark slab on light schemes. */
  --cop-command: var(--bg-secondary);
  --cop-command-raised: var(--bg-tertiary);
  --cop-command-text: var(--text-primary);
  --cop-command-muted: var(--text-secondary);
  --cop-success: var(--color-success);
  --cop-warning: var(--color-warning);
  --cop-danger: var(--color-danger);

  /* Light Mode Colors */
  --bg-primary-color: #3b82f6;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-sidebar: #1e293b;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-button: #3b82f6;
  --bg-button-hover: #2563eb;
  --bg-button-secondary: #e2e8f0;
  --bg-button-secondary-hover: #cbd5e1;
  /* Brand "primary" accent — used site-wide for links, borders & accents via
     var(--bs-primary). Defined here (Bootstrap is NOT loaded) so these references
     resolve to a visible brand blue instead of an invalid value that makes links
     inherit the body text color and blend into the background. */
  --bs-primary: #3b82f6;
  --bs-primary-hover: #2563eb;
  /* Semantic LINK tokens (SC-20260630-0005). Anchors must never key off button
     background tokens — themes (redesign/navy) repaint buttons to neutral grays,
     which made links blend invisibly into text/background. These stay a legible
     accent in every theme; override per theme when needed. */
  --link-color: #2563eb;
  --link-hover: #1d4ed8;
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-on-accent: #ffffff;
  --text-muted: #64748b;
  --text: #475569;
  --border-primary: #e2e8f0;
  --border-secondary: #cbd5e180;
  --border-focus: #3b82f6;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.25rem;
  --spacing-2xl: 3rem;

  /* Qanvas suite — shared Google Workspace-inspired editor semantics. */
  --qanvas-doc-accent: #1a73e8;
  --qanvas-sheet-accent: #188038;
  --qanvas-slides-accent: #c25e00;
  --qanvas-page-accent: #8e24aa;
  --qanvas-board-accent: #6d4aff;
  --qanvas-suite-canvas: #f8f9fa;
  --qanvas-suite-toolbar: #f1f3f4;
  --qanvas-suite-surface: #ffffff;
  --qanvas-suite-paper: #ffffff;
  --qanvas-suite-line: #dadce0;
  --qanvas-suite-text: #202124;
  --qanvas-suite-muted: #5f6368;
  /* Ink + rules ON the paper — theme-independent, paired with --qanvas-suite-paper. */
  --qanvas-paper-ink: #202124;
  --qanvas-paper-muted: #5f6368;
  --qanvas-paper-line: #dadce0;
  --qanvas-paper-soft: #f8f9fa;
  --qanvas-suite-hover: #e8eaed;
  --qanvas-suite-selection: #e8f0fe;
  --qanvas-suite-share: #c2e7ff;
  --qanvas-suite-share-hover: #a8d8f5;


  /* Semantic status tokens — ONE palette for "this is fine / this needs a look /
     this is wrong / here is a fact", shared by every screen instead of a private
     hex palette per sheet. The values are the ones the hiring pills and the v2
     ports converged on, so they are contrast-checked on both grounds: the light
     set is dark enough to read as TEXT on a light card, the dark set light enough
     to read on a dark one. Consumers use them for text, dot fills and borders —
     tinted BACKGROUNDS still come from a per-use rgba()/color-mix(), because a
     14%-alpha wash is a different value, not a different theme. */
  --color-success: #047857;
  --color-warning: #b45309;
  --color-danger: #dc2626;
  --color-info: #1d4ed8;
  /* Presence dot for an idle user who is on an open time-clock shift (owner
     rule 2026-09-10): orange in every theme — a status hue, not a theme tint. */
  --presence-on-clock: #f97316;
  /* Two status hues beside the four above, the same in every theme (the Command
     Rooms directory, mission-rooms-v2.css): High severity sits between danger
     and warning, and a live floor is its own amber. */
  --color-status-high: #ea580c;
  --color-status-live: #f59e0b;
  /* Categorical data-viz hues (identity, never status), in stacking order:
     blue, aqua, violet pass the dataviz validator on adjacent pairs in both
     modes; 1 and 3 never touch, and every mark ships with an icon + label.
     Plus a neutral for "Other". First caller: Jobsite dashboard categories. */
  --viz-cat-1: #2a78d6;
  --viz-cat-2: #1baf7a;
  --viz-cat-3: #4a3aa7;
  --viz-cat-neutral: #8a8f98;

  /* Layout */
  --topbar-height: 64px;
  --sidebar-width: 250px;

  /* Scrollbar Colors */
  --scrollbar-track: #e5e7eb;
  --scrollbar-thumb: #9ca3af;
  --scrollbar-thumb-hover: #6b7280;
  --scrollbar-thumb-active: #4b5563;
  --cs-r-control: 9px;
  --radius-control: 10px;
  --radius-native: 14px;
  --radius-card: 16px;
  --radius-pill: 100px;
}

/* Common Animations */
@keyframes reaction-pop {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bootstrap 5.3 (src/vendor-globals.ts) ships its own ink tokens on a bare
   :root — --bs-body-color #212529 and friends — and never sees data-theme.
   Anything that still resolves through them (a .btn with no variant, .text-muted,
   .form-control text) rendered near-black on the dark and navy surfaces. Map
   them onto the platform tokens here; `html:root` outranks Bootstrap's :root, so
   load order does not matter. Body background stays with the theme files. */
html:root {
  --bs-body-color: var(--text-primary);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-border-color: var(--border-primary);
}

/* Dark Mode Colors */
[data-theme="dark"] {
  /* Dark/color schemes use their own deepest surface, not a fixed navy band. */
  --cop-command: var(--bg-primary);
  --cop-command-raised: var(--bg-tertiary);
  --cop-command-text: var(--text-primary);
  --cop-command-muted: var(--text-secondary);
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-sidebar: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #334155;
  --bg-button: #3b82f6;
  --bg-button-hover: #2563eb;
  --bg-button-secondary: #334155;
  --bg-button-secondary-hover: #475569;
  --bs-primary: #3b82f6;
  --bs-primary-hover: #2563eb;
  /* Links need a LIGHTER blue on dark surfaces — #2563eb is only ~2.7:1 on
     #1e293b (fails WCAG); #60a5fa is ~5.8:1. */
  --link-color: #60a5fa;
  --link-hover: #93c5fd;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --text-inverse: #0f172a;
  --text-muted: #64748b;
  --text: #cbd5e1;

  --border-primary: #334155;
  --border-secondary: #475569;
  --border-focus: #3b82f6;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);

  --qanvas-doc-accent: #8ab4f8;
  --qanvas-sheet-accent: #81c995;
  --qanvas-slides-accent: #fdd663;
  --qanvas-page-accent: #d7aefb;
  --qanvas-board-accent: #c4b5fd;

  --qanvas-suite-canvas: var(--bg-secondary, #202124);
  --qanvas-suite-toolbar: #303134;
  --qanvas-suite-surface: var(--bg-primary, #202124);
  /* Document surfaces stay LIGHT in every theme (owner ruling 2026-08-26):
     paper is paper, whichever chrome surrounds it. */
  --qanvas-suite-paper: #ffffff;
  --qanvas-suite-line: var(--border-secondary, #5f6368);
  --qanvas-suite-text: var(--text-primary, #e8eaed);
  --qanvas-suite-muted: var(--text-secondary, #bdc1c6);
  --qanvas-suite-hover: #3c4043;
  --qanvas-suite-selection: #394457;
  --qanvas-suite-share: #174ea6;
  --qanvas-suite-share-hover: #185abc;

  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;

  --viz-cat-1: #3987e5;
  --viz-cat-2: #199e70;
  --viz-cat-3: #9085e9;
  --viz-cat-neutral: #7c8491;

  /* Scrollbar Colors (Dark Theme) */
  --scrollbar-track: #1f2937;
  --scrollbar-thumb: #4b5563;
  --scrollbar-thumb-hover: #6b7280;
  --scrollbar-thumb-active: #9ca3af;
}

[data-theme="dark"][data-color-scheme="navy"] {
  --qanvas-paper-ink: #0b1528cf;
  --qanvas-suite-line: #0b1528cf;
  --qanvas-suite-toolbar: #3b4353;
}

/* The redesign theme is dark BY DEFAULT and stamps no data-theme, so it carries
   the status palette explicitly: dark under html.redesign-ui, light only when the
   theme says light. Both outrank [data-theme="dark"] on specificity, so file order
   does not matter. */
html.redesign-ui {
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-info: #60a5fa;
}

html.redesign-ui[data-theme="light"] {
  --color-success: #047857;
  --color-warning: #b45309;
  --color-danger: #dc2626;
  --color-info: #1d4ed8;
}