/*
 * Uchi: tokens de cor dos temas.
 * Use no elemento raiz: <html data-theme="uchi-claro"> ou <html data-theme="uchi-dark">.
 * Uchi Claro é o padrão. Os nomes seguem o padrão --color-* do Dandori.
 *
 * Regras:
 * - Roxo é marca e ação, nunca status. Status usa verde, âmbar, vermelho e azul.
 * - --color-luz e --color-luz-deep são só para preenchimento, nunca para texto.
 *   Texto sobre destaque dourado usa --color-on-luz-soft sobre --color-luz-soft.
 * - Status nunca depende só da cor: venha sempre com texto ou ícone.
 */

:root {
  /* Escala uva, ancorada nos gradientes da marca (500 = cor principal) */
  --color-brand-50: #f8f3fc;
  --color-brand-100: #e9dbf2;
  --color-brand-200: #d4bce9;
  --color-brand-300: #be9bdb;
  --color-brand-400: #a973d1;
  --color-brand-500: #8f4fbe;
  --color-brand-600: #7d41ab;
  --color-brand-700: #6c3498;
  --color-brand-800: #4e1983;
  --color-brand-900: #3d1168;
  --color-brand-950: #2b0a4d;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Outfit", var(--font-sans);
}

:root,
[data-theme="uchi-claro"] {
  color-scheme: light;

  /* Superfícies */
  --color-canvas: #faf7fc;
  --color-surface: #ffffff;
  --color-lane: #f2ecf7;
  --color-line: #e7deef;

  /* Texto */
  --color-ink: #2b1a40;
  --color-ink-soft: #5c4c6e;
  --color-ink-faint: #6e5f80;

  /* Ação */
  --color-primary: #7d41ab;
  --color-primary-hover: #6c3498;
  --color-on-primary: #ffffff;
  --color-link: #6c3498;
  --color-focus: #8f4fbe;
  --color-brand-soft: #efe5f7;
  --color-on-brand-soft: #5a2a85;

  /* Luz: destaque dourado */
  --color-luz: #e5c07b;
  --color-luz-deep: #d19a66;
  --color-luz-soft: #fbf1dd;
  --color-on-luz-soft: #7a4f12;

  /* Status */
  --color-ok: #1c7349;
  --color-ok-soft: #e2f4e9;
  --color-atencao: #8a5a06;
  --color-atencao-soft: #fbf0d9;
  --color-problema: #b3213a;
  --color-problema-soft: #fce8ec;
  --color-info: #1d6a9f;
  --color-info-soft: #e3f0f9;

  --shadow-card: 0 1px 2px rgb(43 10 77 / 0.05), 0 4px 18px rgb(43 10 77 / 0.06);
  --shadow-card-hover: 0 2px 4px rgb(43 10 77 / 0.06), 0 10px 28px rgb(43 10 77 / 0.10);
}

[data-theme="uchi-dark"] {
  color-scheme: dark;

  /* Superfícies */
  --color-canvas: #170a29;
  --color-surface: #2a1945;
  --color-lane: #1f1136;
  --color-line: #40305c;

  /* Texto */
  --color-ink: #f3ecfa;
  --color-ink-soft: #c6b8d8;
  --color-ink-faint: #a697ba;

  /* Ação */
  --color-primary: #a973d1;
  --color-primary-hover: #be9bdb;
  --color-on-primary: #170a29;
  --color-link: #be9bdb;
  --color-focus: #be9bdb;
  --color-brand-soft: #3b2260;
  --color-on-brand-soft: #e0ccf2;

  /* Luz: destaque dourado */
  --color-luz: #e5c07b;
  --color-luz-deep: #d19a66;
  --color-luz-soft: #3a2a14;
  --color-on-luz-soft: #f0d49c;

  /* Status */
  --color-ok: #6fd3a0;
  --color-ok-soft: #15332c;
  --color-atencao: #f0c674;
  --color-atencao-soft: #37280f;
  --color-problema: #ff93a3;
  --color-problema-soft: #421729;
  --color-info: #7cc4f0;
  --color-info-soft: #14304a;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 18px rgb(0 0 0 / 0.25);
  --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.35);
}