/* ==========================================================
   COPILOT GESTORIA — Design Tokens
   Single source of truth for the entire UI.
   Extends the editorial-css system (navy/amber/Instrument Serif)
   into the authenticated product.

   Prefix: --cg-*
   All new component classes use .cg-* prefix.
   ========================================================== */

:root {
  /* ── Brand Colors ────────────────────────────────── */
  --cg-navy:           #0c1222;
  --cg-navy-soft:      #141c30;
  --cg-navy-mid:       #1a2540;
  --cg-navy-light:     #243352;

  --cg-amber:          #e8a838;
  --cg-amber-hover:    #d4952e;
  --cg-amber-light:    #f5d590;
  --cg-amber-glow:     rgba(232, 168, 56, 0.15);
  --cg-amber-600:      #d4952e;
  --cg-amber-glow-md:  rgba(232, 168, 56, 0.25);

  /* ── Slate Scale (blue-gray neutrals) ────────────── */
  --cg-slate-950:      #0b1120;
  --cg-slate-900:      #0f172a;
  --cg-slate-800:      #1e293b;
  --cg-slate-700:      #334155;
  --cg-slate-600:      #475569;
  --cg-slate-500:      #64748b;
  --cg-slate-400:      #94a3b8;
  --cg-slate-300:      #cbd5e1;
  --cg-slate-200:      #e2e8f0;
  --cg-slate-100:      #f1f5f9;
  --cg-slate-50:       #f8fafc;

  /* ── Semantic Colors ─────────────────────────────── */
  --cg-green:          #10b981;
  --cg-green-light:    #d1fae5;
  --cg-green-dark:     #059669;
  --cg-green-glow:     rgba(16, 185, 129, 0.12);

  --cg-red:            #ef4444;
  --cg-red-light:      #fee2e2;
  --cg-red-dark:       #dc2626;
  --cg-red-glow:       rgba(239, 68, 68, 0.12);

  --cg-blue:           #3b82f6;
  --cg-blue-light:     #dbeafe;
  --cg-blue-dark:      #2563eb;
  --cg-blue-100:       rgba(59, 130, 246, 0.08);
  --cg-blue-glow:      rgba(59, 130, 246, 0.12);

  --cg-orange:         #f59e0b;
  --cg-orange-light:   #fef3c7;
  --cg-orange-dark:    #d97706;
  --cg-orange-glow:    rgba(245, 158, 11, 0.12);

  /* ── Priority Semantics (Inbox / Anomalies / Tasks) ── */
  /* Pre-mezclados a 10% alpha sobre fondo blanco para evitar variar el alpha por componente */
  --cg-priority-critical:      #b91c1c;
  --cg-priority-critical-glow: rgba(220, 38, 38, 0.10);
  --cg-priority-high:          #c2410c;
  --cg-priority-high-glow:     rgba(234, 88, 12, 0.10);
  --cg-priority-medium:        #b45309;
  --cg-priority-medium-glow:   rgba(217, 119, 6, 0.10);
  --cg-priority-low:           #475569;
  --cg-priority-low-glow:      rgba(100, 116, 139, 0.10);

  /* ── Surfaces ────────────────────────────────────── */
  --cg-bg-page:        #f4f6f9;
  --cg-bg-card:        #ffffff;
  --cg-bg-sidebar:     var(--cg-navy);
  --cg-bg-header:      #ffffff;
  --cg-bg-hover:       #f0f2f5;
  --cg-bg-elevated:    #ffffff;
  --cg-bg-overlay:     rgba(12, 18, 34, 0.5);
  --cg-bg-input:       #ffffff;
  --cg-bg-subtle:      #f8f9fb;

  /* ── Text ────────────────────────────────────────── */
  --cg-text-primary:   var(--cg-slate-900);
  --cg-text-secondary: var(--cg-slate-500);
  --cg-text-muted:     var(--cg-slate-400);
  --cg-text-inverse:   #ffffff;
  --cg-text-on-amber:  var(--cg-navy);

  /* ── Borders ─────────────────────────────────────── */
  --cg-border:         var(--cg-slate-200);
  --cg-border-light:   var(--cg-slate-100);
  --cg-border-focus:   var(--cg-amber);

  /* ── Typography ──────────────────────────────────── */
  --cg-font-display:   'Instrument Serif', Georgia, serif;
  --cg-font-body:      'DM Sans', system-ui, -apple-system, sans-serif;
  --cg-font-mono:      'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type Scale (Major Third ≈ 1.25) */
  --cg-text-xs:        0.6875rem; /* 11px — overlines */
  --cg-text-sm:        0.8125rem; /* 13px — captions */
  --cg-text-base:      0.875rem;  /* 14px — body */
  --cg-text-md:        1rem;      /* 16px — body large */
  --cg-text-lg:        1.125rem;  /* 18px */
  --cg-text-xl:        1.25rem;   /* 20px — h3 */
  --cg-text-2xl:       1.5rem;    /* 24px — h2 */
  --cg-text-3xl:       1.875rem;  /* 30px — h1 */
  --cg-text-4xl:       2.25rem;   /* 36px — display */
  --cg-text-5xl:       3rem;      /* 48px — hero number */
  --cg-text-6xl:       4.5rem;    /* 72px — Instrument Serif hero (Resumen del trimestre) */

  /* Line Heights */
  --cg-leading-tight:  1.15;
  --cg-leading-snug:   1.3;
  --cg-leading-normal: 1.5;
  --cg-leading-relaxed:1.7;

  /* Letter Spacing */
  --cg-tracking-tight: -0.02em;
  --cg-tracking-normal: 0;
  --cg-tracking-wide:   0.02em;
  --cg-tracking-wider:  0.06em;
  --cg-tracking-widest: 0.08em;   /* eyebrows + uppercase labels */

  /* ── Spacing (8px grid) ──────────────────────────── */
  --cg-space-0:   0;
  --cg-space-1:   4px;
  --cg-space-2:   8px;
  --cg-space-3:   12px;
  --cg-space-4:   16px;
  --cg-space-5:   20px;
  --cg-space-6:   24px;
  --cg-space-7:   28px;   /* card inner padding (widget cards) */
  --cg-space-8:   32px;
  --cg-space-10:  40px;
  --cg-space-12:  48px;
  --cg-space-16:  64px;

  /* ── Border Radius ───────────────────────────────── */
  --cg-radius-sm:    6px;
  --cg-radius-md:    8px;
  --cg-radius-lg:    12px;
  --cg-radius-xl:    16px;
  --cg-radius-full:  9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --cg-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --cg-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cg-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --cg-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --cg-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --cg-shadow-glow: 0 0 0 3px var(--cg-amber-glow);
  --cg-shadow-card: 0 1px 3px rgba(12, 18, 34, 0.06), 0 8px 30px rgba(12, 18, 34, 0.05); /* widget cards (sutil + halo) */

  /* ── Transitions ─────────────────────────────────── */
  --cg-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --cg-ease-in-out:  cubic-bezier(0.37, 0, 0.63, 1);
  --cg-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --cg-duration-fast:    150ms;
  --cg-duration-normal:  250ms;
  --cg-duration-slow:    400ms;

  --cg-transition-fast:   var(--cg-duration-fast) var(--cg-ease);
  --cg-transition-normal: var(--cg-duration-normal) var(--cg-ease);
  --cg-transition-slow:   var(--cg-duration-slow) var(--cg-ease-in-out);

  /* ── Z-Index Scale ───────────────────────────────── */
  --cg-z-base:       1;
  --cg-z-dropdown:   100;
  --cg-z-sticky:     200;
  --cg-z-sidebar:    300;
  --cg-z-header:     400;
  --cg-z-overlay:    500;
  --cg-z-modal:      600;
  --cg-z-command:    700;
  --cg-z-toast:      800;
  --cg-z-loader:     900;
  --cg-z-max:        9999;

  /* ── Sidebar ─────────────────────────────────────── */
  --cg-sidebar-width:     260px;
  --cg-sidebar-collapsed: 64px;

  /* ── Header ──────────────────────────────────────── */
  --cg-header-height:     64px;
}


/* ==========================================================
   DARK MODE OVERRIDES
   Applied via data-theme="dark" on <html>
   ========================================================== */
[data-theme="dark"] {
  --cg-bg-page:        #0b1120;
  --cg-bg-card:        #151d2e;
  --cg-bg-sidebar:     #0a0f1c;
  --cg-bg-header:      #111827;
  --cg-bg-hover:       #1e293b;
  --cg-bg-elevated:    #1a2332;
  --cg-bg-overlay:     rgba(0, 0, 0, 0.6);
  --cg-bg-input:       #1e293b;
  --cg-bg-subtle:      #111827;

  --cg-text-primary:   #f1f5f9;
  --cg-text-secondary: #94a3b8;
  --cg-text-muted:     #64748b;
  --cg-text-inverse:   #0b1120;

  --cg-border:         #1e293b;
  --cg-border-light:   #151d2e;

  --cg-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
  --cg-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --cg-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --cg-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --cg-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}