/*
 * Design System — tokens globais.
 *
 * Os nomes antigos (--card, --border, --muted, --radius...) continuam existindo
 * porque 12 mil linhas de CSS dependem deles. O que veio junto foi a escala:
 * tipografia, espaçamento, raio, elevação e estados. Regra nova é usar a escala;
 * número solto no CSS vira dívida.
 */

:root {
  /* ---------- Superfícies (tema escuro) ----------
   *
   * Paleta RDdevs, trazida do rddevs.com. Os tons de fundo são a escala navy
   * do site (#040C1F → #123070) e a cor de marca é o azul #1677FF.
   *
   * Os valores ficam em HSL sem a função, porque o CSS os consome como
   * `hsl(var(--primary))` e isso permite abrir a transparência em
   * `hsl(var(--primary) / 0.12)` sem declarar outra variável.
   */
  --background: 222 77% 7%;        /* navy-950 #040C1F */
  --foreground: 216 100% 95%;      /* blue-100 #E6F0FF */
  --card: 221 75% 11%;             /* navy-900 #071430 */
  --card-foreground: 216 100% 95%;
  --surface-raised: 222 74% 15%;
  --muted: 221 70% 13%;
  --muted-foreground: 219 30% 68%;
  --muted-foreground-subtle: 219 20% 52%;
  --border: 222 74% 18%;           /* navy-800 #0C2152 */
  --border-strong: 221 72% 25%;    /* navy-700 #123070 */
  --input: 221 70% 13%;

  /* ---------- Marca ---------- */
  --primary: 215 100% 54%;         /* blue-500 #1677FF */
  --primary-foreground: 0 0% 100%;
  --primary-light: 216 100% 65%;   /* blue-400 #4C95FF */
  --primary-dark: 216 91% 46%;     /* blue-600 #0A5FE0 */
  --primary-deep: 222 74% 18%;     /* navy-800 */
  --accent: 216 100% 65%;

  /* ---------- Semânticas ---------- */
  --success: 152 58% 45%;
  --success-soft: 152 40% 16%;
  --warning: 38 88% 55%;
  --warning-soft: 38 45% 16%;
  --destructive: 4 72% 56%;
  --destructive-foreground: 0 0% 100%;
  --destructive-soft: 4 45% 17%;
  --info: 210 80% 60%;
  --info-soft: 210 45% 17%;

  /* ---------- Tipografia ---------- */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* Números grandes ficam melhores um pouco fechados. */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* ---------- Espaçamento (base 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Raio ---------- */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius: 0.75rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-full: 999px;

  /* ---------- Elevação ---------- */
  --shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.28);
  --shadow-sm: 0 2px 6px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 6px 16px hsl(0 0% 0% / 0.34);
  --shadow-lg: 0 14px 34px hsl(0 0% 0% / 0.42);
  --shadow-xl: 0 24px 56px hsl(0 0% 0% / 0.5);
  --shadow-card: var(--shadow-sm);
  --shadow-glow: 0 0 0 1px hsl(var(--primary) / 0.35);

  /* ---------- Estados ---------- */
  --ring: var(--primary);
  --ring-width: 2px;
  --ring-offset: 2px;
  --hover-overlay: hsl(0 0% 100% / 0.045);
  --active-overlay: hsl(0 0% 100% / 0.08);
  --disabled-opacity: 0.45;

  /* ---------- Barra lateral ----------
   *
   * A navegação tem tokens próprios porque ela não acompanha mais o fundo: no
   * tema claro o conteúdo é branco e o menu é o cinza #1f1f1f. Sem isso o
   * texto do menu herdaria `--muted-foreground`, que no claro é escuro e
   * desapareceria sobre o cinza.
   *
   * Aqui, no tema escuro, os valores repetem a escala navy que a barra já
   * tinha: um cinza neutro ao lado de um fundo navy viram dois pretos
   * diferentes, e o olho lê isso como defeito, não como camada.
   */
  --sidebar-bg: 222 77% 7%;           /* navy-950, o mesmo fundo de antes */
  --sidebar-surface: 221 75% 11%;     /* cartão do perfil, pílulas */
  --sidebar-foreground: 216 100% 95%;
  --sidebar-muted: 219 30% 68%;
  --sidebar-muted-subtle: 219 20% 52%;
  --sidebar-border: 222 74% 18%;
  --sidebar-edge: 222 74% 18%;        /* a divisa com o conteúdo */
  --sidebar-accent: 216 100% 65%;
  --sidebar-hover: hsl(0 0% 100% / 0.045);

  /* ---------- Layout ---------- */
  --sidebar-width: 15rem;
  --sidebar-width-collapsed: 4.5rem;
  --header-height: 4rem;
  --content-max: 96rem;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.12s;
  --duration-base: 0.18s;
  --duration-slow: 0.28s;
  --transition-smooth: all var(--duration-base) var(--ease-in-out);

  --gradient-primary: linear-gradient(135deg, hsl(var(--primary-light)) 0%, hsl(var(--primary)) 100%);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica Neue, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Tema claro (o padrão) ----------
 *
 * Fundo branco e cinzas neutros, para o conteúdo não competir com o menu. Os
 * cinzas perderam o viés azulado do navy de propósito: ao lado do #1f1f1f da
 * navegação, um cinza frio parecia um segundo tom de azul. A cor de marca
 * escurece um passo (blue-600 #0A5FE0) para manter contraste sobre o branco.
 */
:root[data-theme="light"] {
  --background: 0 0% 100%;
  --foreground: 0 0% 13%;          /* #212121 — o mesmo cinza do menu, um passo acima */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 13%;
  --surface-raised: 0 0% 100%;
  --muted: 0 0% 96%;               /* #f5f5f5 */
  --muted-foreground: 0 0% 38%;    /* 6.1:1 sobre branco */
  --muted-foreground-subtle: 0 0% 44%;  /* 4.9:1 — e ainda passa sobre o cinza --muted */
  --border: 0 0% 90%;              /* #e5e5e5 */
  --border-strong: 0 0% 78%;
  --input: 0 0% 100%;

  --primary: 216 91% 46%;          /* blue-600 #0A5FE0 */
  --primary-foreground: 0 0% 100%;
  /* No claro a variante "light" fica mais ESCURA que a base: ela é usada como
     cor de texto (abas ativas, links) e o blue-500 só dá 4.1:1 no branco. */
  --primary-light: 216 91% 44%;    /* 6:1 sobre branco */
  --primary-dark: 216 91% 36%;
  --primary-deep: 221 72% 25%;     /* navy-700 */
  --accent: 215 100% 54%;

  --success: 152 52% 32%;
  --success-soft: 152 45% 93%;
  --warning: 34 85% 42%;
  --warning-soft: 38 80% 93%;
  --destructive: 4 70% 42%;
  --destructive-foreground: 0 0% 100%;
  --destructive-soft: 4 75% 96%;
  --info: 212 72% 45%;
  --info-soft: 210 80% 95%;

  /* Sombra neutra: com cinzas sem viés, uma sombra azulada suja o branco. */
  --shadow-xs: 0 1px 2px hsl(0 0% 10% / 0.07);
  --shadow-sm: 0 1px 3px hsl(0 0% 10% / 0.09), 0 1px 2px hsl(0 0% 10% / 0.05);
  --shadow-md: 0 4px 12px hsl(0 0% 10% / 0.1);
  --shadow-lg: 0 12px 28px hsl(0 0% 10% / 0.13);
  --shadow-xl: 0 20px 48px hsl(0 0% 10% / 0.16);
  --shadow-card: var(--shadow-sm);

  --sidebar-bg: 0 0% 12%;             /* #1f1f1f */
  --sidebar-surface: 0 0% 16%;
  --sidebar-foreground: 0 0% 95%;
  --sidebar-muted: 0 0% 69%;          /* item inativo — 8.3:1 sobre o cinza */
  --sidebar-muted-subtle: 0 0% 58%;   /* rótulo de grupo — 5.4:1 */
  --sidebar-border: 0 0% 22%;
  --sidebar-edge: 0 0% 12%;
  --sidebar-accent: 216 100% 71%;     /* 5.6:1 sobre o cinza JÁ com o realce do item ativo */
  --sidebar-hover: hsl(0 0% 100% / 0.07);

  /* Declarado à parte porque, com as duas pontas quase juntas no claro, o
     gradiente da marca viraria um azul chapado. */
  --gradient-primary: linear-gradient(135deg, hsl(215 100% 58%) 0%, hsl(216 91% 46%) 100%);

  --hover-overlay: hsl(0 0% 0% / 0.04);
  --active-overlay: hsl(0 0% 0% / 0.07);
}