/*
 * Design tokens — identidade visual do Chaveiro Catarina.
 * Marca: laranja #FF6F0F + preto #181617 + branco (extraídos da logo oficial em PNG).
 * Toda cor, fonte, raio e sombra do sistema vem daqui.
 */
:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* Bahnschrift já vem no Windows e lembra o letreiro "CATARINA" da logo */
  --font-display: "Bahnschrift", "Segoe UI", "Arial Narrow", Arial, sans-serif;

  /* Marca */
  --brand: #ff6f0f;
  --brand-strong: #e85f04;
  --brand-text: #c2410c;      /* laranja para texto pequeno sobre fundo claro (contraste AA) */
  --brand-soft: #fff0e5;
  --brand-soft-2: #ffd3b3;
  --brand-light: #ffa66b;
  --on-brand: #181617;        /* texto sobre laranja: preto passa no contraste AA */
  --ink: #2e2b2c;             /* preto da marca, usado em gráficos e destaques */
  --black: #181617;

  /* Superfícies */
  --page-bg: #eeedec;
  --shell: #e3e2e1;
  --panel: #ebeae9;
  --surface: #ffffff;
  --surface-2: #f4f3f2;
  --border: #e4e2e0;
  --text: #0b090a;
  --text-2: #57534e;
  --text-3: #8a8580;

  /* Menu lateral (sempre escuro, como a bandeira da logo) */
  --sidebar: #0b090a;
  --sidebar-text: #ece9e7;
  --nav-pill: #1c1a1b;
  --nav-pill-hover: #2a2728;

  /* Semânticas */
  --green: #15803d;
  --red: #dc2626;
  --warning: #b45309;
  --info: #2563eb;

  /* Cards de indicadores */
  --stat-1-bg: var(--brand-soft);
  --stat-1-icon: var(--brand-soft-2);
  --stat-1-fg: var(--brand-text);
  --stat-3-bg: #f1f0ef;
  --stat-3-icon: #e2e0de;
  --stat-3-fg: var(--black);

  --glow-1: rgba(255, 111, 15, .15);
  --glow-2: rgba(255, 111, 15, .06);

  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 9, 10, .04), 0 8px 24px rgba(11, 9, 10, .06);
  --focus: 0 0 0 3px rgba(255, 111, 15, .35);
}

:root[data-theme="dark"] {
  --brand-text: #ffa66b;
  --brand-soft: #3a2214;
  --brand-soft-2: #5c3215;
  --ink: #d6d3d1;

  --page-bg: #0d0c0c;
  --shell: #151414;
  --panel: #1d1b1b;
  --surface: #1c1a1a;
  --surface-2: #262323;
  --border: #332f2f;
  --text: #f3f1f0;
  --text-2: #b5b0ab;
  --text-3: #8a8580;

  --sidebar: #080707;
  --nav-pill: #171515;
  --nav-pill-hover: #221f1f;

  --green: #4ade80;
  --red: #f87171;
  --warning: #fbbf24;
  --info: #60a5fa;

  --stat-3-bg: #242121;
  --stat-3-icon: #322e2e;
  --stat-3-fg: #f3f1f0;

  --glow-1: rgba(255, 111, 15, .13);
  --glow-2: rgba(255, 111, 15, .05);

  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}