/* ==========================================================================
   Nexos — Design tokens
   Tudo que é cor, raio, sombra e tipografia vive aqui. As telas devem usar
   APENAS estas variáveis (nunca cores fixas), para que tema claro/escuro,
   cor de destaque, cantos e densidade funcionem em todo lugar.
   ========================================================================== */

:root {
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --pad: 16px;
  --gap: 14px;
  --sidebar-w: 252px;
  --topbar-h: 56px;
  --bottomnav-h: 64px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .18s;

  --z-window: 520;
  --z-dock: 530;
  --z-fab: 450;
  --z-bottomnav: 500;
  --z-menu: 600;
  --z-modal: 700;
  --z-drawer: 800;
  --z-drag: 1000;
  --z-toast: 1100;

  /* ---- Tema claro (padrão): "papel quente" ---- */
  color-scheme: light;
  --bg: #F6F4EF;
  --bg-sub: #EFECE5;
  --surface: #FFFFFF;
  --surface-2: #FAF8F4;
  --surface-3: #F1EEE8;
  --hover: rgba(40, 32, 20, .055);
  --active: rgba(40, 32, 20, .09);
  --border: #E6E1D7;
  --border-2: #D6CFC1;
  --text: #1E1C19;
  --text-2: #5C5850;
  --text-3: #938D81;
  --dot: rgba(40, 32, 20, .13);
  --overlay: rgba(24, 20, 14, .30);
  --glass: rgba(255, 255, 255, .80);
  --shadow-sm: 0 1px 2px rgba(40, 30, 10, .06), 0 1px 1px rgba(40, 30, 10, .04);
  --shadow: 0 2px 6px rgba(40, 30, 10, .06), 0 10px 28px rgba(40, 30, 10, .07);
  --shadow-lg: 0 18px 50px rgba(40, 30, 10, .16), 0 3px 10px rgba(40, 30, 10, .07);
  --shadow-window: 0 24px 64px rgba(40, 30, 10, .20), 0 4px 14px rgba(40, 30, 10, .08);

  --success: #2F9E6B;
  --warning: #C98A12;
  --danger: #D64D3E;
  --info: #2F7BD0;

  /* Cores pastel de cartões/etiquetas: fundo (bg), texto (ink) e forte (s) */
  --c-yellow: #FFF3C2;  --c-yellow-ink: #775800;  --c-yellow-s: #E3B10B;
  --c-peach: #FFE3D2;   --c-peach-ink: #8A3D17;   --c-peach-s: #EE8547;
  --c-pink: #FCE0EB;    --c-pink-ink: #8C2552;    --c-pink-s: #DE548C;
  --c-lilac: #ECE4FC;   --c-lilac-ink: #4E33A0;   --c-lilac-s: #8B6CE0;
  --c-sky: #DCEBFF;     --c-sky-ink: #1D5596;     --c-sky-s: #3D8BE0;
  --c-mint: #D9F2E4;    --c-mint-ink: #1C6A44;    --c-mint-s: #34A56D;
  --c-sand: #F0E8D8;    --c-sand-ink: #6A5833;    --c-sand-s: #B3985A;
  --c-gray: #ECEAE6;    --c-gray-ink: #4A4740;    --c-gray-s: #8C8A84;
}

/* ---- Tema escuro ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141416;
  --bg-sub: #1A1A1D;
  --surface: #1F1F23;
  --surface-2: #232328;
  --surface-3: #2A2A30;
  --hover: rgba(255, 255, 255, .055);
  --active: rgba(255, 255, 255, .09);
  --border: #2F2F36;
  --border-2: #3C3C44;
  --text: #EDEBE6;
  --text-2: #ABA79F;
  --text-3: #77736C;
  --dot: rgba(255, 255, 255, .09);
  --overlay: rgba(0, 0, 0, .55);
  --glass: rgba(31, 31, 35, .82);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .35);
  --shadow-window: 0 24px 64px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .4);

  --success: #4CC28A;
  --warning: #E6A93A;
  --danger: #EE6B5C;
  --info: #5A9BE6;

  --c-yellow: #3A3320;  --c-yellow-ink: #F3D77A;
  --c-peach: #3E2A1F;   --c-peach-ink: #F6B48F;
  --c-pink: #3D2230;    --c-pink-ink: #F2A3C4;
  --c-lilac: #2D2743;   --c-lilac-ink: #C4B3F6;
  --c-sky: #1E2D44;     --c-sky-ink: #9CC4F5;
  --c-mint: #1D3529;    --c-mint-ink: #8FD9B0;
  --c-sand: #35301F;    --c-sand-ink: #DCCB9F;
  --c-gray: #2C2C30;    --c-gray-ink: #C9C6C0;
}

/* ---- Cor de destaque (personalizável em Ajustes) ---- */
:root, :root[data-accent="coral"] { --accent: #E0613F; --accent-2: #C8502F; }
:root[data-accent="indigo"]  { --accent: #5B5BD6; --accent-2: #4949C2; }
:root[data-accent="salvia"]  { --accent: #3D8C6A; --accent-2: #2F7657; }
:root[data-accent="oceano"]  { --accent: #2378C8; --accent-2: #1B64AA; }
:root[data-accent="ameixa"]  { --accent: #9550C8; --accent-2: #7E3EB0; }
:root[data-accent="ambar"]   { --accent: #C4820E; --accent-2: #A86E08; }
:root[data-accent="rosa"]    { --accent: #D6457C; --accent-2: #BC3467; }
:root[data-accent="grafite"] { --accent: #3F3F46; --accent-2: #2C2C33; }
:root[data-theme="dark"][data-accent="grafite"] { --accent: #D4D4D8; --accent-2: #F4F4F5; --on-accent: #18181B; }

:root {
  --on-accent: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 36%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 82%, var(--text));
}

/* ---- Classes de cor: aplique .c-<cor> e use var(--c-bg), var(--c-ink), var(--c-s) ---- */
.c-yellow { --c-bg: var(--c-yellow); --c-ink: var(--c-yellow-ink); --c-s: var(--c-yellow-s); }
.c-peach  { --c-bg: var(--c-peach);  --c-ink: var(--c-peach-ink);  --c-s: var(--c-peach-s); }
.c-pink   { --c-bg: var(--c-pink);   --c-ink: var(--c-pink-ink);   --c-s: var(--c-pink-s); }
.c-lilac  { --c-bg: var(--c-lilac);  --c-ink: var(--c-lilac-ink);  --c-s: var(--c-lilac-s); }
.c-sky    { --c-bg: var(--c-sky);    --c-ink: var(--c-sky-ink);    --c-s: var(--c-sky-s); }
.c-mint   { --c-bg: var(--c-mint);   --c-ink: var(--c-mint-ink);   --c-s: var(--c-mint-s); }
.c-sand   { --c-bg: var(--c-sand);   --c-ink: var(--c-sand-ink);   --c-s: var(--c-sand-s); }
.c-gray   { --c-bg: var(--c-gray);   --c-ink: var(--c-gray-ink);   --c-s: var(--c-gray-s); }

/* ---- Personalização: cantos, densidade, fonte ---- */
:root[data-corners="retos"] { --r-xs: 3px; --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-xl: 12px; }
:root[data-corners="redondos"] { --r-xs: 8px; --r-sm: 11px; --r: 16px; --r-lg: 22px; --r-xl: 28px; }
:root[data-density="compacto"] { --pad: 11px; --gap: 10px; --fs: 13.5px; }
:root[data-density="espacoso"] { --pad: 20px; --gap: 18px; --fs: 14.5px; }
:root[data-font="nunito"] { --font-ui: "Nunito", ui-rounded, system-ui, sans-serif; }
:root[data-font="serifa"] { --font-ui: "Fraunces", ui-serif, Georgia, serif; }