/* Design tokens — Catarino's Group design system ("Nosso lugar é junto.", 2026).
   Preto e papel estruturam; as cores expressam. Na interface do produto, cantos arredondados.
   Every colour, font and radius the app uses comes from here. */
:root {
  /* Brand palette */
  --preto: #0c0d0d;
  --papel: #f4f1eb;
  --branco: #ffffff;
  --grafite: #1a1b1c;
  --cinza-escuro: #2b2d2f;
  --cinza-medio: #4b4e51;
  --cinza-claro: #d5d5d6;
  --linha: #c9c4ba;
  --areia: #d9d2c5;
  --ceu: #1f66ea;
  --mar: #0a45b5;
  --natureza: #2fa66f;
  --luz: #f9c22e;
  --flor: #f68dc5;
  --calor: #ee4426;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ls-display: -0.04em;
  --ls-eyebrow: 0.22em;

  /* Surfaces & ink */
  --bg: var(--papel);
  --surface: var(--branco);
  --surface-2: #faf8f4;
  --surface-sunk: #ebe6dc;
  --line: #ddd7cc;
  --line-strong: var(--linha);
  --ink: var(--preto);
  --ink-2: var(--cinza-escuro);
  --ink-3: var(--cinza-medio);
  --ink-inverse: var(--branco);

  /* Action: preto structures, Céu marks focus and links */
  --accent: var(--preto);
  --accent-hover: var(--cinza-escuro);
  --accent-soft: #e4ecfc;
  --accent-ink: var(--branco);
  --link: var(--mar);
  --focus: var(--ceu);
  --nav-active: var(--luz);

  /* Status: brand colours as fills, darker steps for text on papel */
  --good: #1f7a50;     --good-fill: var(--natureza); --good-soft: #e1f1e8;
  --warning: #8a6100;  --warning-fill: var(--luz);  --warning-soft: #fdf1cc;
  --serious: #b8461b;  --serious-fill: #f0703c;     --serious-soft: #fde6da;
  --critical: #c22f15; --critical-fill: var(--calor); --critical-soft: #fde1db;
  --neutral-soft: #ece8e0;

  --chart-1: var(--ceu);
  --chart-1-soft: #a9c3f5;
  --chart-grid: #ddd7cc;

  /* Board */
  --board-bg: #e7e1d6;
  --list-bg: #f4f1eb;
  --card-bg: var(--branco);
  --card-shadow: 0 0 0 1px #ddd7cc;

  /* Sidebar is always preto */
  --side-bg: var(--preto);
  --side-ink: var(--papel);
  --side-ink-2: #9a9b9c;
  --side-hover: var(--grafite);

  /* Rounded, friendly product UI (brand pieces such as the arc stay geometric). */
  --radius-s: 8px;
  --radius: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
  --shadow-pop: 0 18px 48px rgba(12, 13, 13, .16), 0 2px 8px rgba(12, 13, 13, .06);
  --shadow-panel: 0 1px 2px rgba(12, 13, 13, .04);
  --ease-brand: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--preto);
    --surface: var(--grafite);
    --surface-2: #202223;
    --surface-sunk: #131414;
    --line: #2b2d2f;
    --line-strong: #3a3d40;
    --ink: var(--papel);
    --ink-2: var(--cinza-claro);
    --ink-3: #9a9b9c;
    --ink-inverse: var(--preto);
    --accent: var(--papel);
    --accent-hover: var(--branco);
    --accent-soft: #14264a;
    --accent-ink: var(--preto);
    --link: #7ea6f4;
    --focus: #5b8ff0;
    --good: #5cc795;     --good-soft: #13291e;
    --warning: #f9c22e;  --warning-soft: #33290d;
    --serious: #f58a5c;  --serious-soft: #3a1f12;
    --critical: #ff7a62; --critical-soft: #3d1711;
    --neutral-soft: #232526;
    --chart-1: #5b8ff0;
    --chart-1-soft: #24406f;
    --chart-grid: #2b2d2f;
    --board-bg: #131414;
    --list-bg: #1a1b1c;
    --card-bg: #232526;
    --card-shadow: 0 0 0 1px #2b2d2f;
    --side-bg: #000000;
    --side-hover: #161717;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--preto);
  --surface: var(--grafite);
  --surface-2: #202223;
  --surface-sunk: #131414;
  --line: #2b2d2f;
  --line-strong: #3a3d40;
  --ink: var(--papel);
  --ink-2: var(--cinza-claro);
  --ink-3: #9a9b9c;
  --ink-inverse: var(--preto);
  --accent: var(--papel);
  --accent-hover: var(--branco);
  --accent-soft: #14264a;
  --accent-ink: var(--preto);
  --link: #7ea6f4;
  --focus: #5b8ff0;
  --good: #5cc795;     --good-soft: #13291e;
  --warning: #f9c22e;  --warning-soft: #33290d;
  --serious: #f58a5c;  --serious-soft: #3a1f12;
  --critical: #ff7a62; --critical-soft: #3d1711;
  --neutral-soft: #232526;
  --chart-1: #5b8ff0;
  --chart-1-soft: #24406f;
  --chart-grid: #2b2d2f;
  --board-bg: #131414;
  --list-bg: #1a1b1c;
  --card-bg: #232526;
  --card-shadow: 0 0 0 1px #2b2d2f;
  --side-bg: #000000;
  --side-hover: #161717;
  color-scheme: dark;
}