/* StatDeep — Paleta 2 "Claridad de datos" (light, corporativa) */
:root {
  /* Base palette */
  --sd-white: #FFFFFF;
  --sd-bg-base: #FAFBFD;        /* Blanco hueso — fondo base */
  --sd-bg-secondary: #F0F2F7;   /* Gris muy claro — fondo secundario */
  --sd-blue-600: #2563EB;       /* Primario */
  --sd-cyan-500: #29ABE2;       /* Acento */
  --sd-ink-900: #12151C;        /* Texto principal (casi negro) */
  --sd-gray-500: #5B6472;       /* Texto secundario */

  /* Derived tints & shades (oklch-harmonized with primary) */
  --sd-blue-700: #1D4FC4;
  --sd-blue-500: #3B76F0;
  --sd-blue-100: #DBE6FC;
  --sd-blue-50:  #EDF3FE;
  --sd-cyan-100: #D9F0FA;
  --sd-cyan-50:  #ECF8FD;
  --sd-gray-300: #C3C9D4;
  --sd-gray-200: #E2E6EE;
  --sd-gray-100: #EDF0F5;

  /* Semantic (status) */
  --sd-success: #16A34A;
  --sd-success-bg: #E5F6EC;
  --sd-warning: #D97706;
  --sd-warning-bg: #FCF1E0;
  --sd-danger: #DC2626;
  --sd-danger-bg: #FBE9E9;

  /* Brand gradient (mark-inspired: primary → accent) */
  --sd-gradient-brand: linear-gradient(135deg, var(--sd-blue-600) 0%, var(--sd-cyan-500) 100%);

  /* Semantic aliases */
  --surface-page: var(--sd-bg-base);
  --surface-secondary: var(--sd-bg-secondary);
  --surface-card: var(--sd-white);
  --surface-inset: var(--sd-bg-secondary);
  --surface-brand-subtle: var(--sd-blue-50);

  --text-body: var(--sd-ink-900);
  --text-secondary: var(--sd-gray-500);
  --text-on-brand: #FFFFFF;
  --text-link: var(--sd-blue-600);

  --action-primary: var(--sd-blue-600);
  --action-primary-hover: var(--sd-blue-700);
  --action-accent: var(--sd-cyan-500);

  --border-default: var(--sd-gray-200);
  --border-strong: var(--sd-gray-300);
  --border-focus: var(--sd-blue-600);
}