/* ====================================================================
 * CEB IPes · ILUMINA 2.0 / Atlas LightGov — Design System tokens
 *
 * Single source of truth. Substitui qualquer redefinição inline antiga.
 *
 * Hierarquia:
 *   --ds-*  → primitivas universais (paleta, type, motion, radius)
 *   --      → tokens semânticos (bg, text, accent, ok/warn/crit) por tema
 *
 * Use --ds-* só pra construir variantes locais.
 * Use os semânticos no código real.
 * ==================================================================== */

:root {
  /* ===== Brand primitivas ===== */
  --ds-ceb-blue: #0f62fe;              /* Azul institucional CEB (primário light) */
  --ds-ceb-blue-deep: #015386;         /* Azul deep (selos, headers oficiais) */
  --ds-ceb-blue-bright: #4589ff;       /* Variante dark (legibilidade) */
  --ds-ceb-blue-soft: #78a9ff;         /* Hover dark */
  --ds-ceb-orange: #E87B14;            /* Laranja CEB IPes (logo accent) */
  --ds-ceb-orange-deep: #c66607;       /* Hover/active orange */
  --ds-ceb-orange-bright: #FF933D;     /* Variante dark */
  --ds-ceb-yellow: #f1c21b;            /* IBM warn / iluminação */

  /* ===== Gray scale (IBM Carbon-ish, neutral) ===== */
  --ds-gray-50:  #fafafa;
  --ds-gray-100: #f4f4f4;
  --ds-gray-200: #e8e8e8;
  --ds-gray-300: #c6c6c6;
  --ds-gray-400: #a8a8a8;
  --ds-gray-500: #737373;
  --ds-gray-600: #525252;
  --ds-gray-700: #393939;
  --ds-gray-800: #262626;
  --ds-gray-900: #161616;
  --ds-gray-950: #0a0a0a;

  /* ===== Semantic colors ===== */
  --ds-ok-light: #198038;
  --ds-ok-dark: #42be65;
  --ds-warn-light: #a06200;
  --ds-warn-dark: #f1c21b;
  --ds-crit-light: #da1e28;
  --ds-crit-dark: #fa4d56;

  /* ===== Type ===== */
  --ds-font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;
  --ds-font-serif: 'IBM Plex Serif', Georgia, serif;

  /* ===== Motion ===== */
  --ds-ease: cubic-bezier(.4, 0, .2, 1);
  --ds-ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ds-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ds-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ds-dur-fast: .14s;
  --ds-dur-base: .22s;
  --ds-dur-slow: .35s;

  /* ===== Radius ===== */
  --ds-radius-sm: 4px;
  --ds-radius: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 24px;
  --ds-radius-pill: 999px;

  /* ===== Shadow (consistent, soft) ===== */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --ds-shadow: 0 4px 16px -4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --ds-shadow-md: 0 12px 28px -8px rgba(0,0,0,.16);
  --ds-shadow-lg: 0 24px 60px -16px rgba(0,0,0,.25);
}

/* ====================================================================
 * LIGHT THEME (default — :root sem data-theme ou data-theme="light")
 * ==================================================================== */
:root, :root[data-theme="light"], :root:not([data-theme]) {
  --bg: var(--ds-gray-50);
  --bg-2: var(--ds-gray-100);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--ds-gray-100);
  --surface-3: var(--ds-gray-200);
  --surface-glass: rgba(255,255,255,.78);
  --border: #e0e0e0;
  --border-2: var(--ds-gray-300);
  --text-1: var(--ds-gray-950);
  --text: var(--ds-gray-950);
  --text-2: var(--ds-gray-700);
  --text-3: var(--ds-gray-600);
  --text-muted: var(--ds-gray-500);
  --accent: var(--ds-ceb-blue);
  --accent-2: #0353e9;
  --accent-soft: #edf5ff;
  --accent-glow: rgba(15,98,254,.15);
  --ok: var(--ds-ok-light);
  --warn: var(--ds-warn-light);
  --crit: var(--ds-crit-light);
  --primary: var(--ds-ceb-yellow);
  --primary-2: #d2a106;
  --ceb-orange: var(--ds-ceb-orange);
  --ceb-orange-2: #c46410;
  --ceb-orange-soft: rgba(232,123,20,.12);
  --ceb-blue: var(--ds-ceb-blue-deep);
  --ceb-blue-2: #01406a;
  --grid-line: rgba(15,98,254,.06);
  --shadow: var(--ds-shadow);
  --shadow-lg: var(--ds-shadow-md);
}

/* ====================================================================
 * DARK THEME
 * ==================================================================== */
:root[data-theme="dark"] {
  --bg: var(--ds-gray-950);
  --bg-2: #0c0c0d;
  --bg-elev: #161618;
  --surface: #1a1a1d;
  --surface-2: #242429;
  --surface-3: #2e2e34;
  --surface-glass: rgba(10,10,10,.72);
  --border: #2c2c33;
  --border-2: #3d3d44;
  --text-1: #f8f8f8;
  --text: #f8f8f8;
  --text-2: var(--ds-gray-300);
  --text-3: var(--ds-gray-400);
  --text-muted: #6f6f6f;
  --accent: var(--ds-ceb-blue-bright);
  --accent-2: var(--ds-ceb-blue-soft);
  --accent-soft: rgba(69,137,255,.14);
  --accent-glow: rgba(69,137,255,.25);
  --ok: var(--ds-ok-dark);
  --warn: var(--ds-warn-dark);
  --crit: var(--ds-crit-dark);
  --primary: var(--ds-ceb-yellow);
  --primary-2: #d2a106;
  --ceb-orange: var(--ds-ceb-orange-bright);
  --ceb-orange-2: var(--ds-ceb-orange);
  --ceb-orange-soft: rgba(255,147,61,.16);
  --ceb-blue: #3a8fd0;
  --ceb-blue-2: var(--ds-ceb-blue-deep);
  --grid-line: rgba(69,137,255,.08);
  --shadow: 0 4px 12px -2px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 48px -12px rgba(0,0,0,.7);
}

/* ====================================================================
 * BASE
 * ==================================================================== */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background .25s ease, color .25s ease;
}
button { font: inherit; border: 0; background: 0; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
*:focus { outline: none; }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--text); }

.mono { font-family: var(--ds-font-mono); }
.serif { font-family: var(--ds-font-serif); }

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-sans);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
  color: var(--text);
}
h1 { font-size: clamp(28px, 3vw, 48px); font-weight: 300; letter-spacing: -.022em; }
h1 strong { font-weight: 600; }
h1 em { font-family: var(--ds-font-serif); font-style: italic; font-weight: 400; color: var(--accent); }
h2 { font-size: clamp(22px, 2.2vw, 32px); }
h3 { font-size: clamp(16px, 1.4vw, 20px); }

/* ====================================================================
 * LEGACY PRIMITIVES (kept pra zero breakage — não remover sem refactor)
 * Use as classes .ds-* de components.css em código novo.
 * ==================================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:500 11px var(--ds-font-mono); color:var(--accent);
  letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--accent); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; background:var(--surface-2); border:1px solid var(--border);
  font:600 10.5px var(--ds-font-mono); color:var(--text-2);
  letter-spacing:.08em; text-transform:uppercase;
}
.pill .dot { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.pill.ok .dot{ background:var(--ok); }
.pill.warn .dot{ background:var(--warn); }
.pill.crit .dot{ background:var(--crit); }
.pill.live .dot{ animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.4); } }

.card{
  background:var(--surface); border:1px solid var(--border);
  padding:22px 22px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-soft); }
.card .h{ font-size:14.5px; font-weight:600; color:var(--text); }
.card .d{ font-size:12.5px; color:var(--text-2); line-height:1.55; }
.card .badge{ font:500 9.5px var(--ds-font-mono); color:var(--accent); letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.card.featured{ border-left:2px solid var(--accent); }

.kpi{
  background:var(--surface); border:1px solid var(--border);
  border-left:2px solid var(--accent);
  padding:24px 22px 22px;
  display:flex; flex-direction:column; gap:8px;
  position:relative;
}
.kpi b{
  font-family: var(--ds-font-sans);
  font-weight:300; font-size:clamp(34px,3.5vw,52px);
  color:var(--text); letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.kpi b em{ font-style:normal; color:var(--accent); font-weight:400; }
.kpi .lbl{ font:500 10.5px var(--ds-font-mono); color:var(--text-3); letter-spacing:.14em; text-transform:uppercase; }
.kpi .sub{ font-size:12px; color:var(--text-2); margin-top:4px; }
.kpi.warn{ border-left-color:var(--warn); } .kpi.warn b em{color:var(--warn);}
.kpi.ok{ border-left-color:var(--ok); } .kpi.ok b em{color:var(--ok);}
.kpi.crit{ border-left-color:var(--crit); } .kpi.crit b em{color:var(--crit);}

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  font:500 13px var(--ds-font-sans);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-2);
  transition:all .15s ease;
  cursor:pointer;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 6px 24px var(--accent-glow); }
.btn.primary:hover{ background:var(--accent-2); transform:translateY(-1px); box-shadow:0 12px 36px var(--accent-glow); color:#fff; }
.btn.ghost{ background:transparent; }
.btn.sm{ padding:6px 12px; font-size:11.5px; }
.btn.lg{ padding:14px 28px; font-size:14.5px; }

/* INPUTS */
.input, .select, .textarea {
  width:100%;
  padding:11px 14px;
  font:500 13px var(--ds-font-sans);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-2);
  transition:border-color .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--accent);
}

/* TABLES */
.tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.tbl th, .tbl td{
  padding:9px 12px; text-align:left;
  border-bottom:1px solid var(--border);
}
.tbl th{
  font:600 10px var(--ds-font-mono);
  color:var(--text-3); letter-spacing:.1em; text-transform:uppercase;
  background:var(--surface-2);
}
.tbl td{ color:var(--text-2); }
.tbl td strong{ color:var(--text); font-weight:600; }
.tbl tr:hover td{ background:var(--surface-2); }

/* CHROME (header global pra todos os protótipos) */
.chrome-bar{
  position:fixed; top:0; left:0; right:0;
  padding:14px 24px;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg-elev); border-bottom:1px solid var(--border);
  z-index:1000;
  height:56px;
}
.chrome-brand{
  display:flex; align-items:center; gap:10px;
  font:500 12px var(--ds-font-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-2);
}
.chrome-brand .logo{ width:24px; height:24px; flex-shrink:0; }
.logo-ceb{
  height:32px; width:auto; max-width:96px;
  object-fit:contain; flex-shrink:0;
  background:#fff; padding:3px 5px; border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.logo-ceb.lg{ height:48px; max-width:148px; padding:4px 7px; }
.logo-ceb.xl{ height:72px; max-width:220px; padding:6px 10px; border-radius:4px; }
.logo-ceb.hero{ height:96px; max-width:280px; padding:8px 14px; border-radius:6px; }
:root[data-theme="dark"] .logo-ceb{ background:rgba(255,255,255,.96); }
.brand-stack{ display:flex; flex-direction:column; gap:0; line-height:1.1; }
.brand-stack .brand-name{
  font:600 12px var(--ds-font-sans); color:var(--text);
  letter-spacing:0; text-transform:none; white-space:nowrap;
}
.brand-stack .brand-sub{
  font:500 9px var(--ds-font-mono); color:var(--text-3);
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.chrome-brand .pulse{ width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s ease-in-out infinite; }

.chrome-nav{ display:flex; align-items:center; gap:20px; }
.chrome-nav a{
  font:500 12px var(--ds-font-sans);
  color:var(--text-3); transition:color .15s ease;
}
.chrome-nav a:hover, .chrome-nav a.active { color:var(--accent); }

.chrome-actions{ display:flex; align-items:center; gap:10px; }

.theme-toggle{ display:flex; background:var(--surface-2); border:1px solid var(--border); height:26px; }
.theme-toggle button{
  padding:0 8px; height:24px;
  font:500 10px var(--ds-font-mono); color:var(--text-3);
  display:flex; align-items:center; gap:4px;
  transition:all .15s; letter-spacing:.08em;
}
.theme-toggle button.active{ background:var(--text); color:var(--bg-elev); }

/* LAYOUT — SHELL com sidebar (pra dashboards) */
.shell{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; padding-top:56px; }
.shell-sidebar{
  background:var(--surface); border-right:1px solid var(--border);
  padding:20px 0;
  position:sticky; top:56px; height:calc(100vh - 56px);
  overflow-y:auto;
}
.shell-sidebar .group { padding:8px 20px; margin-top:14px; }
.shell-sidebar .group-label {
  font:600 9.5px var(--ds-font-mono);
  color:var(--text-3); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:8px;
}
.shell-sidebar a {
  display:flex; align-items:center; gap:10px;
  padding:8px 20px;
  font:500 12.5px var(--ds-font-sans);
  color:var(--text-2);
  border-left:2px solid transparent;
  transition:all .12s ease;
}
.shell-sidebar a:hover { color:var(--text); background:var(--surface-2); }
.shell-sidebar a.active { color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); }
.shell-sidebar svg{ width:16px; height:16px; flex-shrink:0; }

.shell-main { padding:24px 32px; overflow-x:hidden; }
.shell-main h1.page-title { font-size:24px; font-weight:300; letter-spacing:-.015em; margin-bottom:6px; }
.shell-main .page-sub { font-size:13px; color:var(--text-3); margin-bottom:24px; }

/* GRID UTILS */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.grid-6 { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
@media (max-width:1100px){ .grid-5, .grid-6 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){ .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns:1fr; } }

/* iPhone frame (pra simulator mobile) */
.iphone-frame{
  position:relative;
  width:390px; height:844px;
  background:#0a0a0a;
  border-radius:54px;
  padding:14px 14px;
  margin:0 auto;
  box-shadow:0 0 0 8px #1a1a1a, 0 30px 80px rgba(0,0,0,.3), 0 10px 30px rgba(15,98,254,.1);
  overflow:hidden;
}
.iphone-frame::before{
  content:''; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:34px; background:#0a0a0a; border-radius:0 0 20px 20px; z-index:10;
}
.iphone-screen{
  width:100%; height:100%; background:var(--bg);
  border-radius:42px; overflow:hidden;
  position:relative;
}
.iphone-statusbar{
  height:44px; padding:14px 28px 0;
  display:flex; justify-content:space-between; align-items:flex-start;
  font:600 14px var(--ds-font-sans);
  color:var(--text);
}

/* CCO Wall: tela 4K dedicada — fundo escuro permanente */
.cco-stage{
  width:100vw; height:100vh; min-height:100vh;
  background:#0a0a0a; color:#f0f0f0;
  display:grid; grid-template-rows:60px 1fr 80px;
  font-family: var(--ds-font-sans);
  overflow:hidden;
}

/* SCROLLBAR (minimal) */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* HOVER GLOW (decorative) */
.glow-hover { position:relative; }
.glow-hover::after {
  content:''; position:absolute; inset:-2px; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--accent-soft), transparent 60%);
  opacity:0; transition:opacity .25s ease;
}
.glow-hover:hover::after { opacity:1; }