/* ==========================================================================
   QCentroid Design System — Tokens v1.7
   Single source of truth. Plain CSS custom properties: no build step,
   works with Bootstrap 4 / AdminLTE 3 / jQuery UI.
   Light theme on :root. Dark theme on .dark-mode (AdminLTE's own class)
   and [data-theme="dark"].
   ========================================================================== */

:root {
  /* ---- 1. Brand palette (from Brand Book C) ------------------------------ */
  /* Brand names point at the ramps below, so they can never drift apart.  */
  --qc-slate:        var(--qc-slate-800);  /* Pizarra #232C3D — text, logo  */
  --qc-cloud:        var(--qc-slate-25);   /* Nube #F7F8FA — main background */
  --qc-jade:         var(--qc-jade-500);   /* Jade #34A583 — the optimum     */
  --qc-jade-bright:  var(--qc-jade-400);   /* Jade Claro #5CCBA2 — on dark   */
  --qc-coral:        #E0503A;  /* Coral — emphasis accent, max 1 per view   */
  --qc-on-jade:      var(--qc-jade-900);   /* #06281D — text on any jade     */
  --qc-white:        #FFFFFF;

  /* ---- 2. Ramps ---------------------------------------------------------- */
  /* Slate neutrals — every grey leans toward Pizarra                        */
  --qc-slate-0:   #FFFFFF;
  --qc-slate-25:  #F7F8FA;
  --qc-slate-50:  #F0F2F5;
  --qc-slate-100: #E2E5EA;
  --qc-slate-200: #C9CFD8;
  --qc-slate-300: #9AA3B2;
  --qc-slate-400: #7A8596;
  --qc-slate-500: #5F6B7D;
  --qc-slate-600: #465063;
  --qc-slate-700: #343D50;
  --qc-slate-800: #232C3D;
  --qc-slate-900: #1A2230;
  --qc-slate-950: #121824;

  /* Jade */
  --qc-jade-50:  #ECF7F2;
  --qc-jade-100: #D3EFE4;
  --qc-jade-200: #A8DFCB;
  --qc-jade-300: #7AD6B4;
  --qc-jade-400: #5CCBA2;
  --qc-jade-500: #34A583;
  --qc-jade-600: #2A8A6D;  /* graphic jade on light: bars, icons ≥24px (4.2:1) */
  --qc-jade-700: #1F7A5F;  /* jade as TEXT on light (5.2:1) — any size     */
  --qc-jade-800: #155441;  /* jade text on jade-50/100 washes (8.8:1)      */
  --qc-jade-900: #06281D;

  /* ---- 3. Semantic — surfaces & ink (light) ------------------------------ */
  --qc-bg:              var(--qc-slate-25);   /* page                        */
  --qc-surface:         var(--qc-slate-0);    /* cards, tables, modals       */
  --qc-surface-sunken:  var(--qc-slate-50);   /* table headers, wells        */
  --qc-surface-hover:   var(--qc-slate-50);
  --qc-surface-selected:var(--qc-jade-50);
  --qc-surface-inverse: var(--qc-slate-800);  /* sidebar, tooltips           */

  --qc-text:            var(--qc-slate-800);  /* 13.2:1 on bg — AAA          */
  --qc-text-secondary:  var(--qc-slate-500);  /* 5.1:1 — AA                  */
  --qc-text-muted:      var(--qc-slate-400);  /* 3.7:1 — captions, ticks; never body */
  --qc-text-placeholder:#6B7688;              /* 4.6:1 on white — inputs     */
  --qc-text-inverse:    var(--qc-white);
  --qc-text-inverse-secondary: var(--qc-slate-200);
  --qc-link:            var(--qc-jade-700);
  --qc-link-hover:      var(--qc-jade-900);

  --qc-border:          var(--qc-slate-100);  /* Línea                       */
  --qc-border-strong:   var(--qc-slate-200);  /* dividers that need more weight */
  --qc-border-control:  #828C9B;              /* input, checkbox, secondary button edge — ≥3:1 on white, cloud, sunken (WCAG 1.4.11) */
  --qc-focus-ring:      0 0 0 2px #FFFFFF, 0 0 0 4px #1F7A5F; /* solid, ≥3:1 on every surface */

  /* Actions */
  --qc-primary:         var(--qc-jade-500);
  --qc-primary-hover:   var(--qc-jade-400);   /* lighter = keeps 6.5:1 ink   */
  --qc-primary-active:  var(--qc-jade-500);   /* same fill: ink stays 5.2:1  */
  --qc-primary-active-ring: inset 0 0 0 2px var(--qc-jade-700); /* pressed = inner ring */
  --qc-on-primary:      var(--qc-on-jade);    /* 5.2:1 on jade               */
  --qc-outline-primary: var(--qc-jade-600);   /* outline-primary edge 4.2:1  */
  --qc-secondary:       var(--qc-slate-100);  /* tonal secondary fill        */
  --qc-secondary-hover: var(--qc-slate-200);  /* ink 8.9:1                   */
  --qc-on-secondary:    var(--qc-slate-800);
  --qc-danger-fill:     #C0392F;              /* filled danger, white ink 5.4:1 */
  --qc-danger-fill-hover:#A8352C;             /* 6.5:1                       */
  --qc-on-danger:       #FFFFFF;
  /* Form states */
  --qc-control-disabled-bg: var(--qc-slate-50);  /* disabled & read-only fields */
  --qc-control-disabled-text: var(--qc-slate-400);
  --qc-control-readonly-text: var(--qc-slate-800);
  /* Code: light flavour (logs, JSON, files) and console flavour (commands) */
  --qc-code-bg:        var(--qc-slate-50);
  --qc-code-border:    var(--qc-slate-100);
  --qc-code-text:      var(--qc-slate-800);   /* 12.5:1 */
  --qc-code-muted:     var(--qc-slate-500);   /* line numbers, comments 4.8:1 */
  --qc-console-bg:     var(--qc-slate-950);
  --qc-console-border: var(--qc-slate-950);
  --qc-console-text:   #E8ECF2;               /* 15:1 */
  --qc-console-muted:  var(--qc-slate-300);   /* 7:1 */
  --qc-console-prompt: var(--qc-jade-400);    /* 8.9:1 */
  /* Modal backdrop: tinted glass */
  --qc-backdrop:       rgba(247,248,250,.72);
  --qc-backdrop-blur:  6px;
  --qc-logo-ground:    #FFFFFF;   /* tile behind third-party logos and org icons */
  --qc-accent:          var(--qc-coral);

  /* ---- 4. Status (UI only — never brand communication) ------------------ */
  /* strong = small text & icons on light; medium = dots, borders, fills;
     light = banner/badge backgrounds; text = AA text on its own light bg   */
  --qc-info-strong:    #143D6E;  --qc-info:    #2A5FA8;  --qc-info-bg:    #DEE8F5;  --qc-info-text:    #143D6E;
  /* Success is a leaf green, deliberately apart from jade (jade = the optimum, not "done") */
  --qc-success-strong: #1E6B2E;  --qc-success: #3D8B37;  --qc-success-bg: #E4F2DE;  --qc-success-text: #1E6B2E;
  --qc-warning-strong: #8A5A0C;  --qc-warning: #B97C12;  --qc-warning-bg: #FBEFD5;  --qc-warning-text: #8A5A0C;
  --qc-danger-strong:  #9E332C;  --qc-danger:  #D24C40;  --qc-danger-bg:  #FBE3E0;  --qc-danger-text:  #9E332C;
  --qc-neutral-strong: #465063;  --qc-neutral: #9AA3B2;  --qc-neutral-bg: #E4E7EC;  --qc-neutral-text: #465063;

  /* Phase scale (Info → Jade: the last phase is the optimum), 5 and 6 steps. Step 0 = not started */
  --qc-phase-0:   #9AA3B2;
  --qc-phase5-1:  #143D6E; --qc-phase5-2: #1A506E; --qc-phase5-3: #1F646E; --qc-phase5-4: #24776D; --qc-phase5-5: #2A8A6D;
  --qc-phase6-1:  #143D6E; --qc-phase6-2: #184C6E; --qc-phase6-3: #1D5C6E; --qc-phase6-4: #216B6D; --qc-phase6-5: #267B6D; --qc-phase6-6: #2A8A6D;

  /* ---- 5. AI — assistant & agents only ----------------------------------- */
  --qc-ai:         #7B61E0;   /* sparkle icon, borders, AI chips            */
  --qc-ai-strong:  #5A43B8;   /* AI text/labels on light (7.2:1)           */
  --qc-ai-bg:      #EEEAFC;   /* AI panels, generated-content wash         */

  /* ---- 6. Data visualisation — categorical, fixed order ----------------- */
  /* Validated: adjacent CVD ΔE ≥ 10 both modes; first 3 pass all-pairs.    */
  --qc-series-1: #2A5FA8;  /* blue  */
  --qc-series-2: #E0A02E;  /* amber — needs direct labels (2.3:1)          */
  --qc-series-3: #2F9A7A;  /* jade  */
  --qc-series-4: #9B4F96;  /* plum  */
  --qc-series-5: #C4553A;  /* rust  */
  --qc-series-6: #3F9FD1;  /* sky — needs direct labels (3.0:1)            */
  --qc-chart-grid:  var(--qc-slate-100);
  --qc-chart-axis:  var(--qc-slate-200);
  --qc-chart-label: var(--qc-slate-500);

  /* ---- 7. Typography ------------------------------------------------------ */
  --qc-font-sans:  "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --qc-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --qc-font-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: var(--qc-font-sans); --font-serif: var(--qc-font-serif); --font-mono: var(--qc-font-mono); /* aliases used by qcentroid-components.css */

  /* Product scale (px) — app body is 14                                     */
  --qc-text-2xs: 11px;  /* mono captions, IDs                              */
  --qc-text-xs:  12px;  /* badges, table meta                              */
  --qc-text-sm:  13px;  /* secondary, table cells                          */
  --qc-text-md:  14px;  /* body                                             */
  --qc-text-lg:  16px;  /* card titles                                      */
  --qc-text-xl:  20px;  /* section titles                                   */
  --qc-text-2xl: 24px;  /* page titles                                      */
  --qc-text-3xl: 32px;  /* KPI figures                                      */
  --qc-text-4xl: 48px;  /* marketing H1 (40–64)                             */
  --qc-weight-regular: 400;
  --qc-weight-medium:  500;
  --qc-weight-semibold:600;
  --qc-weight-bold:    700;
  --qc-leading-tight: 1.15;
  --qc-leading-snug:  1.35;
  --qc-leading-body:  1.55;
  --qc-tracking-display: -0.015em;
  --qc-tracking-label:    0.06em;

  /* ---- 8. Space, radius, elevation, motion ------------------------------ */
  --qc-space-0: 0;    --qc-space-1: 4px;  --qc-space-2: 8px;  --qc-space-3: 12px;
  --qc-space-4: 16px; --qc-space-5: 20px; --qc-space-6: 24px; --qc-space-8: 32px;
  --qc-space-10: 40px; --qc-space-12: 48px; --qc-space-16: 64px;

  --qc-radius-xs: 4px;    /* badges, tags, IDs                             */
  --qc-radius-sm: 6px;    /* buttons, inputs                               */
  --qc-radius-md: 10px;   /* cards, panels                                 */
  --qc-radius-lg: 14px;   /* modals, drawers                               */
  --qc-radius-pill: 999px;

  --qc-shadow-0: none;                                                     /* cards: border, no shadow */
  --qc-shadow-1: 0 1px 2px rgba(35,44,61,.06), 0 1px 3px rgba(35,44,61,.05); /* raised / hover      */
  --qc-shadow-2: 0 6px 16px -4px rgba(35,44,61,.14), 0 2px 4px rgba(35,44,61,.06); /* dropdown, popover */
  --qc-shadow-3: 0 24px 48px -12px rgba(35,44,61,.28);                     /* modal                */

  --qc-ease: cubic-bezier(.2,.7,.2,1);
  --qc-duration-fast: 120ms;
  --qc-duration: 200ms;

  /* Layout */
  --qc-sidebar-width: 240px;
  --qc-sidebar-collapsed-width: 64px;
  --qc-topbar-height: 56px;
  --qc-content-max: 1600px;
}

/* ---- Dark theme ---------------------------------------------------------- */
.dark-mode,
[data-theme="dark"] {
  color-scheme: dark;
  --qc-bg:              var(--qc-slate-950);
  --qc-surface:         var(--qc-slate-900);
  --qc-surface-sunken:  #161D29;
  --qc-surface-hover:   #222B3B;
  --qc-surface-selected:#173A33;
  --qc-surface-inverse: #0C1119;

  --qc-text:            #E8ECF2;
  --qc-text-secondary:  #A3ADBD;
  --qc-text-muted:      #7F8A9C;
  --qc-link:            var(--qc-jade-400);
  --qc-link-hover:      var(--qc-jade-300);

  --qc-border:          #2A3345;
  --qc-border-strong:   #3A4458;
  --qc-border-control:  #66728A;              /* 3.3:1 on surface            */
  --qc-text-placeholder:#7F8A9C;              /* 4.6:1 on surface            */
  --qc-focus-ring:      0 0 0 2px #1A2230, 0 0 0 4px #5CCBA2;

  --qc-primary:         var(--qc-jade-400);   /* Jade Claro on dark          */
  --qc-primary-hover:   var(--qc-jade-300);
  --qc-primary-active:  var(--qc-jade-400);
  --qc-primary-active-ring: inset 0 0 0 2px var(--qc-jade-700);
  --qc-outline-primary: var(--qc-jade-400);   /* 8:1 on surface              */
  --qc-secondary:       #2A3345;
  --qc-secondary-hover: #343D50;              /* ink 9.2:1                   */
  --qc-on-secondary:    #E8ECF2;
  --qc-danger-fill:     #C0392F;              /* white ink 5.4:1             */
  --qc-danger-fill-hover:#A8352C;
  --qc-control-disabled-bg: #161D29;
  --qc-control-disabled-text: #7F8A9C;
  --qc-control-readonly-text: #E8ECF2;
  --qc-code-bg:        #161D29;
  --qc-code-border:    #2A3345;
  --qc-code-text:      #E8ECF2;               /* 14.3:1 */
  --qc-code-muted:     #A3ADBD;
  --qc-console-bg:     #0C1119;
  --qc-console-border: #2A3345;
  --qc-backdrop:       rgba(12,17,25,.72);
  --qc-logo-ground:    #CDD3DD;   /* dimmed white: logos keep working, the tile stops glowing */

  --qc-info-strong:#8DB4EA;    --qc-info:#5B8FD9;    --qc-info-bg:#1B2B45;    --qc-info-text:#8DB4EA;
  --qc-success-strong:#9FD98F; --qc-success:#4E9E43; --qc-success-bg:#1C3319; --qc-success-text:#9FD98F;
  --qc-warning-strong:#EDB65A; --qc-warning:#E0A02E; --qc-warning-bg:#382A12; --qc-warning-text:#EDB65A;
  --qc-danger-strong:#F08A7E;  --qc-danger:#E0604F;  --qc-danger-bg:#3A1C1B;  --qc-danger-text:#F08A7E;
  --qc-neutral-strong:#C3CAD6; --qc-neutral:#7F8A9C; --qc-neutral-bg:#222B3B; --qc-neutral-text:#C3CAD6;

  --qc-ai: #9A84F0; --qc-ai-strong: #B3A4F5; --qc-ai-bg: #262048;

  --qc-series-1: #4F86D6; --qc-series-2: #C08419; --qc-series-3: #2FA882;
  --qc-series-4: #B06AB0; --qc-series-5: #D46548; --qc-series-6: #3A98CC;
  --qc-chart-grid:  #2A3345;
  --qc-chart-axis:  #3A4458;
  --qc-chart-label: #A3ADBD;

  --qc-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --qc-shadow-2: 0 8px 20px -4px rgba(0,0,0,.55);
  --qc-shadow-3: 0 24px 48px -12px rgba(0,0,0,.7);
}