/**
 * UnityHub — CSS Custom Properties Color System
 * Modo claro (único) — dark mode será fase 2
 *
 * Formato: espaço-separado de canais RGB (sem #hex, sem rgb())
 * Permite uso com opacidade no Tailwind: bg-primary/20 → rgb(var(--c-primary) / 0.2)
 */

/* ─────────────────────────────────────────
   LIGHT MODE  (único)
───────────────────────────────────────── */
:root {
  /* Superfície */
  --c-surface:     249 249 255;  /* #f9f9ff */
  --c-surface-0:   255 255 255;  /* #ffffff  lowest */
  --c-surface-1:   243 243 249;  /* #f3f3f9  low */
  --c-surface-2:   237 237 243;  /* #ededf3  mid */
  --c-surface-3:   231 232 238;  /* #e7e8ee  high */
  --c-surface-4:   226 226 232;  /* #e2e2e8  highest */
  --c-surface-dim: 217 218 223;  /* #d9dadf */
  --c-surface-v:   226 226 232;  /* #e2e2e8  variant */

  /* Sobre superfície */
  --c-on-surface:   25  28  32;  /* #191c20 */
  --c-on-surface-v: 74  69  80;  /* #4a4550 */

  /* Primário — violeta escuro */
  --c-primary:        60  30 110;  /* #3c1e6e */
  --c-primary-c:      83  55 134;  /* #533786 container */
  --c-on-primary:    255 255 255;
  --c-on-primary-c:  197 166 254;  /* #c5a6fe */
  --c-primary-f:     235 220 255;  /* #ebdcff fixed */
  --c-primary-fd:    211 187 255;  /* #d3bbff fixed-dim */
  --c-on-primary-f:   38   0  88;  /* #260058 */
  --c-on-primary-fv:  83  55 134;  /* #533786 */

  /* Secundário — verde-água */
  --c-secondary:       0 107  94;  /* #006b5e */
  --c-secondary-c:   156 239 222;  /* #9cefde container */
  --c-on-secondary:  255 255 255;
  --c-on-secondary-c: 11 111  98;  /* #0b6f62 */
  --c-secondary-f:   159 242 225;  /* #9ff2e1 */
  --c-secondary-fd:  131 213 197;  /* #83d5c5 */

  /* Terciário — âmbar */
  --c-tertiary:       66  45   0;  /* #422d00 */
  --c-tertiary-c:     94  66   0;  /* #5e4200 */
  --c-on-tertiary:   255 255 255;
  --c-on-tertiary-c: 216 176 102;  /* #d8b066 */

  /* Erro */
  --c-error:         186  26  26;  /* #ba1a1a */
  --c-error-c:       255 218 214;  /* #ffdad6 */
  --c-on-error:      255 255 255;
  --c-on-error-c:    147   0  10;  /* #93000a */

  /* Contorno */
  --c-outline:   123 117 129;  /* #7b7581 */
  --c-outline-v: 203 196 210;  /* #cbc4d2 */

  /* Inversos */
  --c-inverse-surface:    46  48  53;  /* #2e3035 */
  --c-inverse-on-surface: 240 240 246; /* #f0f0f6 */
  --c-inverse-primary:    211 187 255; /* #d3bbff */

  /* Marca */
  --c-navy:    6  27  49;   /* #061b31  stripe-navy */
  --c-purple:  83  58 253;  /* #533afd  stripe-purple */

  /* Tokens de componente */
  --c-sidebar:   248 250 252;  /* slate-50 */
  --c-card:      255 255 255;  /* white */
  --c-input:     248 250 252;  /* slate-50 */
  --c-border:    226 232 240;  /* slate-200 */
  --c-nav-text:  100 116 139;  /* slate-500 */
  --c-nav-sub:   148 163 184;  /* slate-400 */
}

/* ─────────────────────────────────────────
   BODY BASE
───────────────────────────────────────── */
body {
  background-color: rgb(var(--c-surface));
  color:            rgb(var(--c-on-surface));
}

/* ─────────────────────────────────────────
   GLASS HEADER
───────────────────────────────────────── */
.glass-effect {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(203, 196, 210, 0.2);
}

/* ─────────────────────────────────────────
   SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: rgb(var(--c-outline-v)); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-outline)); }

/* ─────────────────────────────────────────
   TRANSITION GLOBAL (suaviza hover/focus)
───────────────────────────────────────── */
*, *::before, *::after {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.12s ease, box-shadow 0.15s ease;
}
*:focus { transition: none; }