/* =====================================================================
   TOKENS — paleta e medidas do produto inteiro.  Tema: "Ateliê de tinta".
   Fundo papel, tinta escura, e o CMYK como identidade (cores das chips).
   Tema claro/escuro seguem o sistema e o botão de tema.
   ===================================================================== */

:root {
  /* --- papel e tinta (tema claro) --- */
  --bg: #f1ede3;          /* papel */
  --surface: #fbf9f3;     /* papel claro (cards) */
  --surface-2: #f4f0e6;   /* campos */
  --text: #201d18;        /* tinta */
  --muted: #79736a;
  --border: #e4ddcd;
  --border-strong: #d2c9b4;

  /* --- acento de interação (ciano-tinta) --- */
  --accent: #0b6478;
  --accent-soft: #daeaee;
  --on-accent: #ffffff;

  /* --- CMYK: identidade das ferramentas --- */
  --cyan: #12a5c4;
  --magenta: #d6337f;
  --yellow: #d99a00;
  --key: #2e2b2b;

  /* --- estado --- */
  --good: #157f5f;
  --warn: #b4651f;
  --danger: #b3261e;

  /* --- tipografia --- */
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

  /* --- medidas --- */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(40,32,16,.05), 0 8px 24px rgba(40,32,16,.06);
  --shadow-lg: 0 6px 16px rgba(40,32,16,.09), 0 20px 50px rgba(40,32,16,.10);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 32px; --sp-7: 48px;
  --maxw: 1180px;
}

/* tema escuro automático */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18161a;
    --surface: #201e23;
    --surface-2: #27242a;
    --text: #ece7db;
    --muted: #9b9488;
    --border: #322e34;
    --border-strong: #433e46;
    --accent: #33b4cc;
    --accent-soft: #10333a;
    --on-accent: #07222a;
    --cyan: #3bb8d4;
    --magenta: #e85ca0;
    --yellow: #edc042;
    --key: #cfc9bd;
    --good: #3fbb8f;
    --warn: #d99036;
    --danger: #e06a60;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.38);
    --shadow-lg: 0 8px 20px rgba(0,0,0,.45), 0 22px 60px rgba(0,0,0,.5);
  }
}

/* alternância manual */
:root[data-theme="light"] {
  --bg: #f1ede3; --surface: #fbf9f3; --surface-2: #f4f0e6;
  --text: #201d18; --muted: #79736a; --border: #e4ddcd; --border-strong: #d2c9b4;
  --accent: #0b6478; --accent-soft: #daeaee; --on-accent: #ffffff;
  --cyan: #12a5c4; --magenta: #d6337f; --yellow: #d99a00; --key: #2e2b2b;
  --good: #157f5f; --warn: #b4651f; --danger: #b3261e;
  --shadow: 0 1px 2px rgba(40,32,16,.05), 0 8px 24px rgba(40,32,16,.06);
  --shadow-lg: 0 6px 16px rgba(40,32,16,.09), 0 20px 50px rgba(40,32,16,.10);
}
:root[data-theme="dark"] {
  --bg: #18161a; --surface: #201e23; --surface-2: #27242a;
  --text: #ece7db; --muted: #9b9488; --border: #322e34; --border-strong: #433e46;
  --accent: #33b4cc; --accent-soft: #10333a; --on-accent: #07222a;
  --cyan: #3bb8d4; --magenta: #e85ca0; --yellow: #edc042; --key: #cfc9bd;
  --good: #3fbb8f; --warn: #d99036; --danger: #e06a60;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.38);
  --shadow-lg: 0 8px 20px rgba(0,0,0,.45), 0 22px 60px rgba(0,0,0,.5);
}