/* Tokens del design system de TaskOol (tomados del artifact de la R1).
   Para cambiar al design system nuevo, basta con tocar este archivo. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto-base: 15px;
  --interlineado: 1.55;

  --canvas: #F8FAFC;
  --surface: #FFFFFF;
  --sunken: #F1F5F9;
  --content: #1D293D;
  --content-2: #45556C;
  --muted: #62748E;
  --line: #CAD5E2;
  --line-subtle: #E2E8F0;

  --brand: #66C8FF;
  --brand-2: #6675FF;
  --brand-text: #339ACC;
  --brand-subtle: #E6F5FF;

  --ok: #6AD36A;   --ok-text: #3FA03F;   --ok-subtle: #E5F5E6;
  --warn: #EDB666; --warn-text: #B98638; --warn-subtle: #FCF3E8;
  --bad: #EA7474;  --bad-text: #B44545;  --bad-subtle: #FCE9E9;
  --funcionalidad-text: #5560E0; --funcionalidad-subtle: rgba(102, 117, 255, .10);

  --radio-tarjeta: 28px;
  --radio-medio: 16px;
  --radio-pequeno: 8px;
  --radio-pill: 999px;

  --sombra: 0 1px 2px rgba(29, 41, 61, .06), 0 4px 16px rgba(29, 41, 61, .06);
  --area-tactil: 40px;
  /* Flecha de los desplegables */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2362748E' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Modo oscuro: automático según el sistema, salvo que se fuerce con data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #020618; --surface: #0F172B; --sunken: #1D293D;
    --content: #F8FAFC; --content-2: #CAD5E2; --muted: #90A1B9;
    --line: #314158; --line-subtle: #1D293D;
    --brand-text: #66C8FF; --brand-subtle: rgba(102, 200, 255, .14);
    --ok-text: #6AD36A; --ok-subtle: rgba(106, 211, 106, .14);
    --warn-text: #EDB666; --warn-subtle: rgba(237, 182, 102, .14);
    --bad-text: #EA7474; --bad-subtle: rgba(234, 116, 116, .14);
    --funcionalidad-text: #8F99FF; --funcionalidad-subtle: rgba(102, 117, 255, .18);
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .3);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2390A1B9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #020618; --surface: #0F172B; --sunken: #1D293D;
  --content: #F8FAFC; --content-2: #CAD5E2; --muted: #90A1B9;
  --line: #314158; --line-subtle: #1D293D;
  --brand-text: #66C8FF; --brand-subtle: rgba(102, 200, 255, .14);
  --ok-text: #6AD36A; --ok-subtle: rgba(106, 211, 106, .14);
  --warn-text: #EDB666; --warn-subtle: rgba(237, 182, 102, .14);
  --bad-text: #EA7474; --bad-subtle: rgba(234, 116, 116, .14);
  --funcionalidad-text: #8F99FF; --funcionalidad-subtle: rgba(102, 117, 255, .18);
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .3);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%2390A1B9' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}