/* ═══════════════════════════════════════════════════════
   ELITE CS v4 — NIGHTDESK PRODUCT TOKENS
   Identidade visual: azul/cyan. Dark-first.
   Requer: core/tokens.css carregado antes.
   Referência: docs/system.md + docs/arc-final.md
   ═══════════════════════════════════════════════════════ */

/* ─── Dark Mode (Default — "Nightdesk") ─── */
:root {
  /* Background */
  --bg-deep: #080b12;
  --bg-gradient: linear-gradient(160deg, #080b12 0%, #0c1420 50%, #10192a 100%);

  /* Glass Surfaces */
  --glass-1: rgba(255,255,255, 0.035);
  --glass-2: rgba(255,255,255, 0.06);
  --glass-3: rgba(255,255,255, 0.09);
  --glass-border: rgba(120, 180, 210, 0.13);
  --glass-border-hover: rgba(130, 200, 228, 0.24);
  --glass-blur: 24px;
  --glass-inset: inset 0 1px 0 rgba(255,255,255, 0.045);

  /* Accent — Cyan Puro */
  --teal: #40c8f0;
  --teal-glow: rgba(64, 200, 240, 0.14);
  --teal-soft: rgba(64, 200, 240, 0.08);
  --teal-gradient: linear-gradient(135deg, #40c8f0 0%, #70e0ff 100%);

  /* Warm Accent */
  --amber: #f0a030;
  --amber-glow: rgba(240, 160, 48, 0.14);
  --amber-soft: rgba(240, 160, 48, 0.08);

  /* Editorial Status */
  --status-live: #3ce8a0;
  --status-urgent: #f05545;
  --status-scheduled: #f0a030;
  --status-published: #40c8f0;
  --status-draft: rgba(255,255,255, 0.28);
  --status-embargoed: #b06ccf;

  /* AI / Intelligence */
  --ai: #b580e0;
  --ai-glow: rgba(181, 128, 224, 0.14);
  --ai-gradient: linear-gradient(135deg, #b580e0 0%, #8060d0 100%);

  /* Text Hierarchy */
  --text-bright: rgba(255,255,255, 0.95);
  --text-primary: rgba(255,255,255, 0.80);
  --text-secondary: rgba(255,255,255, 0.50);
  --text-tertiary: rgba(255,255,255, 0.28);
  --text-muted: rgba(255,255,255, 0.15);

  /* Layout */
  --sidebar-w: 260px;
  --sidebar-collapsed: 68px;
  --topbar-h: 50px;
  --tabbar-h: 44px;
  --ed-meta-h: 48px;

  /* ─── Arc Final (promoted 2026-04-08) ───
     Gramática visual destilada de tab-bar + status-pills + chrome.
     Ver docs/arc-final.md para princípios. */
  --teal-alpha-02: rgba(64,200,240,0.02);
  --teal-alpha-12: rgba(64,200,240,0.12);
  --teal-alpha-20: rgba(64,200,240,0.20);
  --teal-alpha-28: rgba(64,200,240,0.28);

  --chrome-gradient: linear-gradient(180deg, rgba(6,12,22,0.55), rgba(6,12,22,0.15));
  --active-gradient: linear-gradient(160deg, rgba(64,200,240,0.12), rgba(64,200,240,0.02));
  --chip-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.2);

  --ease-lift: cubic-bezier(.2,.7,.2,1);
  --dur-lift: 200ms;

  --danger-soft: #ff9090;
  --danger-soft-bg: rgba(255,100,100,0.25);

  /* ─── Elevation / Shadow scale ─── */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.30);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.40);
  --shadow-5: 0 32px 80px rgba(0,0,0,0.50);

  --shadow-drawer-l: -8px 0 40px rgba(0,0,0,0.30);
  --shadow-drawer-r:  8px 0 40px rgba(0,0,0,0.30);

  --glow-teal: 0 0 24px rgba(64,200,240,0.40);
  --glow-ai:   0 0 24px rgba(181,128,224,0.40);
  --glow-live: 0 0 16px rgba(60,232,160,0.40);

  /* ─── Focus ring (cor do produto) ─── */
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--teal-soft);
  --focus-ring-strong: 0 0 0 var(--focus-ring-width) var(--teal);

  /* ─── Module accents ───
     Cada cor = um significado editorial claro. */
  --mod-editorial: var(--teal);
  --mod-tv:        #4fd6c8;
  --mod-digital:   #7aa5ff;
  --mod-media:     var(--amber);
  --mod-analytics: #a0e060;
  --mod-ai:        var(--ai);

  --mod-editorial-soft: rgba(64,200,240,0.08);
  --mod-tv-soft:        rgba(79,214,200,0.08);
  --mod-digital-soft:   rgba(122,165,255,0.08);
  --mod-media-soft:     rgba(240,160,48,0.08);
  --mod-analytics-soft: rgba(160,224,96,0.08);
  --mod-ai-soft:        rgba(181,128,224,0.08);
}

/* ─── Light Mode ("v3 Bridge") ─── */
[data-theme="light"] {
  --bg-deep: #f0f3f7;
  --bg-gradient: linear-gradient(160deg, #f0f3f7 0%, #e8edf4 50%, #f5f7fa 100%);

  --glass-1: rgba(255,255,255, 0.75);
  --glass-2: rgba(255,255,255, 0.88);
  --glass-3: rgba(255,255,255, 0.95);
  --glass-border: rgba(0, 40, 80, 0.08);
  --glass-border-hover: rgba(0, 60, 120, 0.14);
  --glass-inset: inset 0 1px 0 rgba(255,255,255, 0.8);

  --teal: #1da8d0;
  --teal-glow: rgba(29, 168, 208, 0.10);
  --teal-soft: rgba(29, 168, 208, 0.06);
  --teal-gradient: linear-gradient(135deg, #1da8d0 0%, #40c0e8 100%);

  --amber: #d89020;
  --amber-glow: rgba(216, 144, 32, 0.10);
  --amber-soft: rgba(216, 144, 32, 0.06);

  --status-live: #20b878;
  --status-urgent: #d84040;
  --status-scheduled: #d89020;
  --status-published: #1da8d0;
  --status-draft: rgba(0,0,0, 0.25);
  --status-embargoed: #9050b0;

  --ai: #8858c0;
  --ai-glow: rgba(136, 88, 192, 0.10);
  --ai-gradient: linear-gradient(135deg, #8858c0 0%, #6848a8 100%);

  /* Light mode needs higher opacity than dark — dark-blue ink on white
     has less perceptual contrast than white on near-black at the same alpha. */
  --text-bright: rgba(0, 20, 40, 0.95);
  --text-primary: rgba(0, 20, 40, 0.82);
  --text-secondary: rgba(0, 20, 40, 0.68);
  --text-tertiary: rgba(0, 20, 40, 0.52);
  --text-muted: rgba(0, 20, 40, 0.40);

  /* Arc Final — alphas reescaladas para teal light (#1da8d0) */
  --teal-alpha-02: rgba(29,168,208,0.03);
  --teal-alpha-12: rgba(29,168,208,0.10);
  --teal-alpha-20: rgba(29,168,208,0.18);
  --teal-alpha-28: rgba(29,168,208,0.26);

  --chrome-gradient: linear-gradient(180deg, rgba(240,243,247,0.60), rgba(240,243,247,0.20));
  --active-gradient: linear-gradient(160deg, rgba(29,168,208,0.10), rgba(29,168,208,0.02));
  --chip-shadow: inset 0 1px 0 rgba(255,255,255,0.80), inset 0 -1px 0 rgba(0,40,80,0.08);

  /* Shadows — alpha baixa sobre branco */
  --shadow-1: 0 1px 3px rgba(0,40,80,0.06);
  --shadow-2: 0 4px 12px rgba(0,40,80,0.08);
  --shadow-3: 0 8px 24px rgba(0,40,80,0.10);
  --shadow-4: 0 16px 48px rgba(0,40,80,0.12);
  --shadow-5: 0 32px 80px rgba(0,40,80,0.16);

  --shadow-drawer-l: -8px 0 40px rgba(0,40,80,0.10);
  --shadow-drawer-r:  8px 0 40px rgba(0,40,80,0.10);

  --danger-soft: #c94545;
  --danger-soft-bg: rgba(200,60,60,0.10);
}
