/* ==========================================================
   Crieatividade — Theme (Light/Dark) — cr_theme.css
   Usa tokens por CSS variables e troca via data-theme
   ========================================================== */

:root{
  /* default = light */
  --bg: #f7fafc;
  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.82);
  --ink: rgba(15,23,42,.92);
  --muted: rgba(15,23,42,.62);
  --border: rgba(15,23,42,.10);

  --shadow: 0 18px 50px rgba(2,6,23,.10);

  /* brand */
  --brand-blue: 59 130 246;   /* #3b82f6 */
  --brand-green: 34 197 94;   /* #22c55e */
  --brand: rgb(var(--brand-blue));
  --brand2: rgb(var(--brand-green));

  /* focus */
  --focus: rgba(var(--brand-blue), .35);
}

body[data-theme="dark"]{
  --bg: #070a12;                 /* obsidian */
  --surface: rgba(17,24,39,.72); /* glass */
  --surface2: rgba(17,24,39,.52);
  --ink: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --border: rgba(255,255,255,.12);

  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --focus: rgba(var(--brand-blue), .45);
}

/* aplicação mínima global */
body{
  background: var(--bg);
  color: var(--ink);
}

.cr-card, .hub-card, .card, .panel, .cr-surface{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
}

a{ color: rgb(var(--brand-blue)); }
a:hover{ opacity: .9; }

input, select, textarea{
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px;
}

input:focus, select:focus, textarea:focus{
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
  border-color: rgba(var(--brand-blue), .55);
}

.cr-btn-primary{
  background: rgb(var(--brand-blue));
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
}

.cr-btn-primary:hover{ filter: brightness(1.05); }