/* CRM-6 — Graiph design tokens for the CRM.
   Copied verbatim from frontend/ai-interface/public/graiph-tokens.css (the platform's single
   source of truth); keep in step when that file changes. CRM-only additions are at the end. */
:root {
  /* Tell the BROWSER the page is dark, not just our own CSS.
     Without this the user agent assumes light and paints its light widgets on top of
     the charcoal palette: scrollbars come out white, and so do select dropdowns,
     checkboxes, radios, date pickers, spin buttons and the caret. That is why several
     interfaces carry their own `::-webkit-scrollbar` blocks — each one is a patch for a
     single container, and every container nobody patched still showed a white bar.
     Declared here so it is true everywhere at once, and because `color-scheme` also
     reaches Firefox, where `::-webkit-scrollbar` does nothing. Custom scrollbar rules
     still win over the native one, so the interfaces that style theirs are unchanged. */
  color-scheme: dark;

  /* Backgrounds — warm charcoal */
  --graiph-bg-primary: #141418;
  --graiph-bg-secondary: #1a1a1f;
  --graiph-bg-tertiary: #202025;
  --graiph-bg-surface: #24242a;
  --graiph-bg-elevated: #2c2c33;
  --graiph-bg-hover: #282830;
  --graiph-bg-light: #FFFFFF;

  /* Accent */
  --graiph-accent: #33CC66;
  --graiph-accent-hover: #2bb358;
  --graiph-accent-muted: rgba(51, 204, 102, 0.15);
  /* The accent used AS TEXT (labels, values, icon glyphs). Same green here, but the
     light theme darkens it — #33CC66 is a 2.1:1 ink on white. The FILL keeps
     --graiph-accent in both themes, so the brand accent still marks active /
     validated state (design system). Green-as-text ALWAYS uses this token. */
  --graiph-accent-text: var(--graiph-accent);
  /* The ink ON an accent (or success) fill. ONE value, no light-theme override —
     that is the point: the fill stays #33CC66 in both themes, so an ink that
     flipped with the background would sit near-white on green in light mode.
     Measured on #33CC66: white 2.11 (fails), #06210f 8.09; on the hover fill
     #2bb358: #06210f 6.24. Reads as 'dark green', not black, which suits the
     accent. (TEL-53; promoted from televiewer.css --accent-ink.) */
  --graiph-accent-ink: #06210f;

  /* Grays */
  --graiph-gray-dark: #333333;
  --graiph-gray-mid: #666666;
  --graiph-gray-light: #CCCCCC;

  /* Text */
  --graiph-text-primary: #E8E8EC;
  --graiph-text-secondary: #A0A0AA;
  --graiph-text-muted: #6B6B78;

  /* Borders */
  --graiph-border: #35353d;
  --graiph-border-hover: #45454f;
  --graiph-border-focus: #33CC66;

  /* Alerts */
  --graiph-alert-warning: #F5A623;
  --graiph-alert-error: #E53935;
  --graiph-alert-info: #2196F3;
  --graiph-alert-success: #33CC66;

  /* Shadows */
  --graiph-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --graiph-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --graiph-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.45);

  /* Typography */
  --graiph-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --graiph-font-xs: 11px;
  --graiph-font-sm: 12px;
  --graiph-font-md: 14px;
  --graiph-font-lg: 16px;
  --graiph-font-xl: 20px;

  /* Spacing scale */
  --graiph-space-xs: 4px;
  --graiph-space-sm: 8px;
  --graiph-space-md: 12px;
  --graiph-space-lg: 16px;
  --graiph-space-xl: 24px;

  /* Radii */
  --graiph-radius-sm: 4px;
  --graiph-radius-md: 6px;
  --graiph-radius-lg: 8px;

  /* Semantic borders */
  --graiph-border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --graiph-border-default: 1px solid rgba(255, 255, 255, 0.15);

  /* Overlay */
  --graiph-overlay: rgba(20, 20, 24, 0.9);

  /* Status colors (semantic) */
  --graiph-status-pending: #F5A623;
  --graiph-status-verified: #33CC66;
  --graiph-status-rejected: #E53935;
  --graiph-status-info: #2196F3;
}

/* =========================================================================
   LIGHT THEME OVERRIDES
   Applied via html.light-theme class (set by themeManager.js).
   Uses html selector for FOUC prevention — class set before <body> renders.
   ========================================================================= */
html.light-theme {
  /* The other half of the pair — without it the light theme keeps dark scrollbars. */
  color-scheme: light;

  --graiph-bg-primary: #F2F3F5;
  --graiph-bg-secondary: #E8E9EC;
  --graiph-bg-tertiary: #DCDDE1;
  --graiph-bg-surface: #FFFFFF;
  --graiph-bg-elevated: #FFFFFF;
  --graiph-bg-hover: #ECEDF0;
  --graiph-bg-light: #FFFFFF;

  --graiph-text-primary: #1a1a1e;
  --graiph-text-secondary: #5a5a65;
  /* Was #8a8a95 — 3.4:1 on white, 2.9:1 on --graiph-bg-hover. Hints, captions and
     axis labels are the smallest type in the platform and were the least legible. */
  --graiph-text-muted: #64646F;

  --graiph-border: #D0D1D6;
  --graiph-border-hover: #B8B9C0;
  --graiph-border-subtle: 1px solid rgba(0, 0, 0, 0.06);
  --graiph-border-default: 1px solid rgba(0, 0, 0, 0.12);

  --graiph-accent-muted: rgba(51, 204, 102, 0.12);

  /* Inks, darkened to clear WCAG AA (4.5:1) as small label text. Measured against the
     three light surfaces #FFFFFF / #F2F3F5 / #ECEDF0; the saturated originals fail
     badly — #33CC66 2.1/1.9/1.8, #F5A623 2.0/1.8/1.7, #2196F3 3.1/2.8/2.7,
     #E53935 4.2/3.8/3.6.
       accent-text #17793A -> 5.48 / 4.94 / 4.68
       warning     #A05F00 -> 5.08 / 4.58 / 4.34
       info        #1565C0 -> 5.75 / 5.18 / 4.91
       error       #C62828 -> 5.62 / 5.06 / 4.80
     The alert tokens darken outright because they are inks first. The few places that
     use one as a FILL put white (or the page background) on it, which only improves:
     white on #F5A623 was 2.0:1 and is 5.1:1 on #A05F00. Anything painting DARK ink on
     an alert fill has to flip its ink with the theme — see #addDepthMarkBtn in the
     drillhole viewer. --graiph-accent and --graiph-status-* are NOT darkened: those are
     fills that carry dark ink, and the accent is the brand green. */
  --graiph-accent-text: #17793A;
  /* Focus ring. The :root value stays #33CC66 (7.3:1 on the dark surfaces), but on the
     light surfaces that green measures 2.11 on white / 1.90 on the page / 1.38 against
     the resting border #D0D1D6 — an invisible ring exactly where SC 1.4.11 measures it
     (adjacent colours). Reuse the darkened accent ink: 5.48 / 4.94 / 3.59. */
  --graiph-border-focus: var(--graiph-accent-text);
  --graiph-alert-warning: #A05F00;
  --graiph-alert-error: #C62828;
  --graiph-alert-info: #1565C0;

  --graiph-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --graiph-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --graiph-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

  --graiph-overlay: rgba(0, 0, 0, 0.5);

  /* Grays — inverted for light backgrounds */
  --graiph-gray-dark: #CCCCCC;
  --graiph-gray-mid: #999999;
  --graiph-gray-light: #555555;
}

/* =========================================================================
   CRM additions — semantic, keyed by the stored business codes
   ========================================================================= */
:root {
  --crm-stage-creada: var(--graiph-text-muted);
  --crm-stage-piloto: var(--graiph-alert-info);
  --crm-stage-enviada: var(--graiph-alert-info);
  --crm-stage-negociacion: var(--graiph-alert-warning);
  --crm-stage-aceptada: var(--graiph-accent-text);
  --crm-stage-rechazada: var(--graiph-alert-error);
  --crm-header-h: 48px;
  --crm-content-max: 1440px;
  /* one-hue magnitude bars (CRM-64 summary); dark value below. Checked with the dataviz palette
     validator against #FFFFFF and #24242a: lightness band, chroma, >= 3:1 contrast. */
  --crm-chart-bar: #2F6DB5;
}
/* CRM-44 contrast (dark only; html.light-theme keeps the platform values): the platform muted
   #6B6B78 is 2.6-3.5:1 and error #E53935 3.3-3.7:1 as small text on these surfaces.
   #8E8E9A: 4.3-5.7:1, still below secondary #A0A0AA; #FF6B66: 5.0-6.6:1. */
html:not(.light-theme) {
  --crm-chart-bar: #5B8FD8;
  --graiph-text-muted: #8E8E9A;
  --graiph-alert-error: #FF6B66;
}