/* ============================================================================
   NextLayer — Design Tokens
   ----------------------------------------------------------------------------
   ESTE É O ÚNICO ARQUIVO QUE PRECISA SER EDITADO PARA RE-TEMATIZAR A MARCA (M11).
   Troque --brand (e, se quiser, as fontes) e a interface inteira acompanha.
   Paleta: neutros QUENTES (paper/ink), estilo Notion/Stripe. Marca neutra hoje.
   ========================================================================== */

:root {
  /* ---- Marca (white-label) — troque só estas linhas quando houver identidade ---- */
  --brand-h: 230;          /* matiz da marca (HSL) */
  --brand-s: 6%;           /* saturação baixa = neutro grafite hoje */
  --brand-l: 16%;
  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-hover: hsl(var(--brand-h) var(--brand-s) 24%);
  --brand-soft: hsl(var(--brand-h) 14% 96%);
  --brand-contrast: #ffffff;            /* texto sobre a cor da marca */

  /* ---- Superfícies & texto (tema claro / paper) ---- */
  --bg:         #f7f6f3;   /* fundo da aplicação (warm paper) */
  --surface:    #ffffff;   /* cards, painéis */
  --surface-2:  #f2f1ec;   /* superfície secundária / hover */
  --surface-3:  #eae8e1;   /* superfície terciária / ativo */
  --border:     #e6e3dc;   /* divisores e bordas */
  --border-strong: #d8d4ca;
  --text:       #1d1c1a;   /* texto principal */
  --text-muted: #6b6862;   /* texto secundário */
  --text-faint: #9a968d;   /* texto terciário / placeholder */

  /* ---- Cores semânticas (discretas) ---- */
  --success:    #2f7d56;  --success-soft: #e6f3ec;
  --warn:       #9a6a00;  --warn-soft:    #fbf1d8;
  --danger:     #b4402f;  --danger-soft:  #f8e7e3;
  --info:       #2b6ca8;  --info-soft:    #e6f0f7;

  /* ---- Tipografia ---- */
  --font-sans: "Hanken Grotesk", ui-sans-serif, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:  0.75rem;     /* 12 */
  --text-sm:  0.8125rem;   /* 13 */
  --text-base:0.9375rem;   /* 15 */
  --text-md:  1.0625rem;   /* 17 */
  --text-lg:  1.25rem;     /* 20 */
  --text-xl:  1.625rem;    /* 26 */
  --text-2xl: 2.25rem;     /* 36 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ---- Forma & profundidade ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(28,26,22,0.05), 0 1px 1px rgba(28,26,22,0.04);
  --shadow-2: 0 2px 4px rgba(28,26,22,0.05), 0 4px 12px rgba(28,26,22,0.07);
  --shadow-3: 0 8px 24px rgba(28,26,22,0.10), 0 2px 6px rgba(28,26,22,0.06);

  /* ---- Espaçamento ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --content-max: 1180px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

/* ============================================================================
   Tema escuro — mesmas variáveis, valores adaptados (ink quente)
   ========================================================================== */
[data-theme="dark"] {
  /* Marca respeita matiz E saturação da customização; lightness adaptado ao escuro.
     Default neutro (s baixa) vira cinza-claro; marca saturada aparece viva. */
  --brand: hsl(var(--brand-h) var(--brand-s) 74%);
  --brand-hover: hsl(var(--brand-h) var(--brand-s) 82%);
  --brand-soft: hsl(var(--brand-h) calc(var(--brand-s) + 6%) 20%);
  --brand-contrast: #1a1916;

  --bg:         #171614;
  --surface:    #201f1c;
  --surface-2:  #292824;
  --surface-3:  #33312c;
  --border:     #322f2a;
  --border-strong: #423e38;
  --text:       #f0eee9;
  --text-muted: #a7a39a;
  --text-faint: #736f66;

  --success:    #6cc08e;  --success-soft: #1c2c23;
  --warn:       #d6a64a;  --warn-soft:    #2e2616;
  --danger:     #e08272;  --danger-soft:  #2e1d19;
  --info:       #6aa6d8;  --info-soft:    #18242e;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.36);
  --shadow-3: 0 10px 30px rgba(0,0,0,0.45);
}