/* ── Design Tokens — Carousel Studio (tema claro "editorial") ─────────
   Inspirado no protótipo de referência. Fontes: Schibsted Grotesk + JetBrains Mono. */
:root {
  /* Superfícies */
  --bg: #F7F6F3;            /* fundo do app (cream) */
  --bg0: #F7F6F3;          /* alias legado */
  --surface: #ffffff;      /* cards */
  --surface-2: #FBFAF7;
  --surface-3: #FDFDFB;
  --subtle: #F4F2EC;       /* chips, botões suaves */
  --subtle-2: #F1EFEA;
  --subtle-3: #F7F5F0;

  /* Sidebar (escura) */
  --side-bg: #171614;
  --side-item-active: #2B2A27;
  --side-fg: #9E9C94;
  --side-fg-strong: #ffffff;
  --side-section: #5E5C55;
  --side-border: #232220;
  --side-menu-bg: #211F1C;
  --side-menu-border: #2E2C28;

  /* Texto */
  --text: #1A1916;
  --text-2: #55534C;
  --text-3: #6B6A63;
  --muted: #9C9A92;
  --muted-2: #8A887F;
  --muted-3: #A09E95;

  /* Bordas */
  --border: #ECEAE3;
  --border-2: #E7E5DE;
  --border-3: #EEECE5;

  /* Accent — IA (roxo). Sobrescrito por marca? Não: o accent de marca vira --brand. */
  --accent: #6D54FF;
  --accent-2: #9A6BFF;
  --accent-grad: linear-gradient(135deg, #6D54FF, #9A6BFF);
  --accent-tint: #EEEBFF;
  --accent-tint-2: #FBFAFF;
  --accent-glow: 0 8px 20px rgba(109,84,255,.3);

  /* Cor da marca ativa (dinâmica) */
  --brand: #6D54FF;

  /* Ação sólida escura */
  --dark: #1A1916;
  --dark-hover: #2A2825;

  /* Status */
  --st-sched: #E0903A;   --st-sched-tint: #FBEEDC;  --st-sched-fg: #B5701C;
  --st-pub: #1F8A5B;     --st-pub-dot: #5BD08A;     --st-pub-tint: #E6F4EC;
  --st-draft: #B7B4AB;
  --st-queue: #9A6BFF;   --st-queue-tint: #EEEBFF;

  /* Semânticos */
  --green: #1F8A5B; --green-dim: #E6F4EC;
  --yellow: #E0903A; --yellow-dim: #FBEEDC;
  --red: #B0463C;  --red-dim: #FBEAE8;
  --blue: #2F6BFF; --blue-dim: #E7EEFF;
  --warning: #E0903A;

  /* Compat legado (código antigo ainda referencia estes) */
  --bg1: var(--surface);
  --bg2: var(--surface);
  --bg3: var(--subtle);
  --bg4: var(--subtle-2);
  --border-hi: var(--border-2);
  --text-secondary: var(--text-2);
  --text-muted: var(--muted);
  --text-primary: var(--text);
  --text-inverse: #ffffff;
  --accent-dim: var(--accent-tint);
  --accent-hover: #5C46E0;

  /* Sizing */
  --topbar-h: 60px;
  --sidebar-w: 248px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 13px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(30,28,24,.06);
  --shadow-card: 0 4px 14px rgba(30,28,24,.10);
  --shadow-soft: 0 10px 30px rgba(30,28,24,.05);
  --shadow-md: 0 8px 24px rgba(30,28,24,.10);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.30);
  --shadow-pop: 0 12px 34px rgba(0,0,0,.28);
  --shadow-slide: 0 24px 60px rgba(20,18,16,.28);
  --shadow-glow: var(--accent-glow);

  /* Transições */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --duration: 180ms;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: #dcd6ff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d8d6cf; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c2c0b8; background-clip: content-box; }
input, select, button, textarea { font-family: inherit; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Animações compartilhadas */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }