/* Cliender Planner — design tokens
   Paleta oficial CLIENDER_BRAND_GUIDE_CLAUDE.md + tokens --cdp-* de CDPro.
   Dark por defecto; :root[data-theme] fuerza el tema elegido por el usuario. */
:root {
  /* Marca (igual en ambos temas) */
  --cdp-purple: #8F7EE9;
  --cdp-purple-soft: #B4A7F0;
  --cdp-purple-deep: #6F5BD9;
  --cdp-navy: #1E2839;
  --cdp-black: #14181E;
  --cdp-cream: #EBEAE4;
  --cdp-white: #FFFFFF;

  /* Superficies (dark premium, default) */
  --bg: #0E1116;
  --bg-raise: #14181E;
  --surface: #1A2029;
  --surface-2: #1E2839;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  /* Texto */
  --text-1: #F2F3F7;
  --text-2: #9AA3B5;
  --text-3: #5F6878;

  /* Overlays/glass — superficies translúcidas dependientes del tema */
  --overlay-1: rgba(255, 255, 255, 0.018);
  --overlay-2: rgba(255, 255, 255, 0.04);
  --overlay-3: rgba(255, 255, 255, 0.055);
  --overlay-track: rgba(255, 255, 255, 0.06);
  --glass-1: rgba(14, 17, 22, 0.65);
  --glass-2: rgba(24, 29, 38, 0.92);
  --glass-3: rgba(26, 32, 41, 0.72);
  --input-bg: rgba(14, 17, 22, 0.7);
  --scrim: rgba(8, 10, 14, 0.6);

  /* Semántica de estado */
  --st-pendiente: #7C8698;
  --st-proceso: #8F7EE9;
  --st-bloqueado: #FF5C5C;
  --st-terminado: #F5A623;
  --st-aprobado: #3ECF8E;

  /* Urgencia — gradiente semáforo (verde→rojo) */
  --u-critica: #FF5C5C;
  --u-alta: #FF9F40;
  --u-media: #F2C94C;
  --u-baja: #3ECF8E;

  /* Tipografía */
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-mono: "Inconsolata", ui-monospace, monospace;

  /* Geometría */
  --r-card: 14px;
  --r-panel: 18px;
  --r-pill: 999px;

  /* Motion (MotionKit: snappy-out + spring iOS) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-ios: linear(0, 0.004 0.83%, 0.0334 2.5%, 0.1172 5%, 0.6064 15%,
    0.8076 20%, 0.8839 22.5%, 0.9439 25%, 0.9889 27.5%, 1.0208 30%,
    1.0357 31.67%, 1.0502 34.17%, 1.057 36.67%, 1.0582 39.17%,
    1.0499 44.17%, 1.0133 57.5%, 1.0008 65.83%, 0.9966 75.83%, 0.9996 100%);
  --dur-fast: 160ms;
  --dur-med: 300ms;
  --dur-spring: 620ms;
}

/* ── Light mode — vía preferencia del sistema o toggle explícito ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F6F4F1;
    --bg-raise: #FFFFFF;
    --surface: #FFFFFF;
    --surface-2: #EFEDE8;
    --line: rgba(20, 24, 30, 0.09);
    --line-strong: rgba(20, 24, 30, 0.16);

    --text-1: #14181E;
    --text-2: #5B6472;
    --text-3: #8E96A2;

    --overlay-1: rgba(20, 24, 30, 0.025);
    --overlay-2: rgba(20, 24, 30, 0.045);
    --overlay-3: rgba(20, 24, 30, 0.06);
    --overlay-track: rgba(20, 24, 30, 0.07);
    --glass-1: rgba(255, 255, 255, 0.75);
    --glass-2: rgba(255, 255, 255, 0.92);
    --glass-3: rgba(255, 255, 255, 0.8);
    --input-bg: rgba(255, 255, 255, 0.85);
    --scrim: rgba(20, 24, 30, 0.42);

    --st-pendiente: #6B7686;
    --st-terminado: #C97F00;
    --st-aprobado: #1E9F6E;

    --u-critica: #E5484D;
    --u-alta: #D9730D;
    --u-media: #A67C00;
    --u-baja: #1E9F6E;
  }
}

:root[data-theme="dark"] {
  --bg: #0E1116;
  --bg-raise: #14181E;
  --surface: #1A2029;
  --surface-2: #1E2839;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);

  --text-1: #F2F3F7;
  --text-2: #9AA3B5;
  --text-3: #5F6878;

  --overlay-1: rgba(255, 255, 255, 0.018);
  --overlay-2: rgba(255, 255, 255, 0.04);
  --overlay-3: rgba(255, 255, 255, 0.055);
  --overlay-track: rgba(255, 255, 255, 0.06);
  --glass-1: rgba(14, 17, 22, 0.65);
  --glass-2: rgba(24, 29, 38, 0.92);
  --glass-3: rgba(26, 32, 41, 0.72);
  --input-bg: rgba(14, 17, 22, 0.7);
  --scrim: rgba(8, 10, 14, 0.6);

  --st-pendiente: #7C8698;
  --st-terminado: #F5A623;
  --st-aprobado: #3ECF8E;

  --u-critica: #FF5C5C;
  --u-alta: #FF9F40;
  --u-media: #F2C94C;
  --u-baja: #3ECF8E;
}

:root[data-theme="light"] {
  --bg: #F6F4F1;
  --bg-raise: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EFEDE8;
  --line: rgba(20, 24, 30, 0.09);
  --line-strong: rgba(20, 24, 30, 0.16);

  --text-1: #14181E;
  --text-2: #5B6472;
  --text-3: #8E96A2;

  --overlay-1: rgba(20, 24, 30, 0.025);
  --overlay-2: rgba(20, 24, 30, 0.045);
  --overlay-3: rgba(20, 24, 30, 0.06);
  --overlay-track: rgba(20, 24, 30, 0.07);
  --glass-1: rgba(255, 255, 255, 0.75);
  --glass-2: rgba(255, 255, 255, 0.92);
  --glass-3: rgba(255, 255, 255, 0.8);
  --input-bg: rgba(255, 255, 255, 0.85);
  --scrim: rgba(20, 24, 30, 0.42);

  --st-pendiente: #6B7686;
  --st-terminado: #C97F00;
  --st-aprobado: #1E9F6E;

  --u-critica: #E5484D;
  --u-alta: #D9730D;
  --u-media: #A67C00;
  --u-baja: #1E9F6E;
}