/* ============================================================
   DataCultura Projects — Foundations
   Colors, type, spacing, radii, shadows, motion.

   Brand DNA: la "D" de cinco bandas (azul → cian → verde → ámbar → magenta)
   sobre tipografía rounded sans. Profesional, didáctico, sobrio en producto;
   colorido en marca y momentos de marca.

   Convención: tokens crudos en :root, alias semánticos abajo.
   ============================================================ */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Nunito+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ BRAND PALETTE ============
     Las 5 bandas del isotipo. Estos son los "anchor colors" de la marca. */
  --dc-navy:    #1753AD;   /* banda 1 — cuerpo principal del isotipo */
  --dc-sky:     #2AAAE4;   /* banda 2 — color de "Projects" en el wordmark */
  --dc-green:   #5FC859;   /* banda 3 */
  --dc-amber:   #FEC325;   /* banda 4 */
  --dc-magenta: #F63C73;   /* banda 5 */

  /* Tonos de soporte derivados — para fondos suaves, hovers, focus rings */
  --dc-navy-50:  #EEF3FB;
  --dc-navy-100: #D7E2F3;
  --dc-navy-200: #A9C0E5;
  --dc-navy-300: #6E92D0;
  --dc-navy-400: #3F6FBE;
  --dc-navy-500: #1753AD;   /* base */
  --dc-navy-600: #134496;
  --dc-navy-700: #0F377C;
  --dc-navy-800: #0B2A5F;
  --dc-navy-900: #081E47;

  --dc-sky-50:   #EAF7FD;
  --dc-sky-100:  #CAEAF9;
  --dc-sky-200:  #92D4F2;
  --dc-sky-300:  #5BBEEB;
  --dc-sky-400:  #2AAAE4;   /* base */
  --dc-sky-500:  #1A8FC4;
  --dc-sky-600:  #0F73A1;
  --dc-sky-700:  #0A567B;

  --dc-green-50:  #ECF9EB;
  --dc-green-100: #CFEFCC;
  --dc-green-200: #9DDF99;
  --dc-green-300: #5FC859;   /* base */
  --dc-green-400: #46AB42;
  --dc-green-500: #348A30;
  --dc-green-600: #266B22;

  --dc-amber-50:  #FFF8E1;
  --dc-amber-100: #FFEDB0;
  --dc-amber-200: #FFDB69;
  --dc-amber-300: #FEC325;   /* base */
  --dc-amber-400: #E0A30A;
  --dc-amber-500: #B07F04;
  --dc-amber-600: #80590A;

  --dc-magenta-50:  #FEEBF1;
  --dc-magenta-100: #FCC8D6;
  --dc-magenta-200: #FA8DAB;
  --dc-magenta-300: #F63C73;   /* base */
  --dc-magenta-400: #D71E58;
  --dc-magenta-500: #A8123F;
  --dc-magenta-600: #7A0A2C;

  /* ============ NEUTRALS ============
     Escala de grises ligeramente cálida hacia el negro,
     ligeramente fría hacia el blanco — para ir bien con el navy. */
  --dc-ink-0:   #FFFFFF;
  --dc-ink-25:  #FAFBFD;
  --dc-ink-50:  #F4F6FA;
  --dc-ink-100: #E9ECF2;
  --dc-ink-200: #D4DAE4;
  --dc-ink-300: #B3BBCB;
  --dc-ink-400: #8893A8;
  --dc-ink-500: #5E6A82;
  --dc-ink-600: #3F4A60;
  --dc-ink-700: #2A3245;
  --dc-ink-800: #1A2032;
  --dc-ink-900: #0E1322;

  /* ============ SEMANTIC — LIGHT (default) ============ */
  /* Superficies */
  --bg-app:        var(--dc-ink-25);     /* fondo de la app */
  --bg-surface:    var(--dc-ink-0);      /* tarjetas, paneles */
  --bg-surface-2:  var(--dc-ink-50);     /* superficies elevadas alternas */
  --bg-sunken:     var(--dc-ink-100);    /* zonas hundidas, tabs inactivos */
  --bg-overlay:    rgba(14, 19, 34, 0.55);

  /* Texto */
  --fg-1: var(--dc-ink-900);   /* títulos, texto principal */
  --fg-2: var(--dc-ink-700);   /* texto cuerpo */
  --fg-3: var(--dc-ink-500);   /* secundario, metadata */
  --fg-4: var(--dc-ink-400);   /* placeholders, deshabilitado */
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--dc-navy-600);

  /* Bordes y separadores */
  --border-subtle:   var(--dc-ink-100);
  --border-default:  var(--dc-ink-200);
  --border-strong:   var(--dc-ink-300);
  --border-focus:    var(--dc-sky-400);

  /* Acción */
  --action-primary-bg:        var(--dc-navy-500);
  --action-primary-bg-hover:  var(--dc-navy-600);
  --action-primary-bg-press:  var(--dc-navy-700);
  --action-primary-fg:        #FFFFFF;

  --action-secondary-bg:        var(--dc-sky-400);
  --action-secondary-bg-hover:  var(--dc-sky-500);

  --action-ghost-fg:        var(--dc-navy-600);
  --action-ghost-bg-hover:  var(--dc-navy-50);

  /* Estados */
  --state-success-bg:   var(--dc-green-50);
  --state-success-fg:   var(--dc-green-500);
  --state-success-line: var(--dc-green-300);

  --state-warning-bg:   var(--dc-amber-50);
  --state-warning-fg:   var(--dc-amber-500);
  --state-warning-line: var(--dc-amber-300);

  --state-danger-bg:    var(--dc-magenta-50);
  --state-danger-fg:    var(--dc-magenta-400);
  --state-danger-line:  var(--dc-magenta-300);

  --state-info-bg:      var(--dc-sky-50);
  --state-info-fg:      var(--dc-sky-500);
  --state-info-line:    var(--dc-sky-300);

  /* Acentos para gráficos / categorías de fondos / chips
     (orden de las bandas del isotipo) */
  --chart-1: var(--dc-navy-500);
  --chart-2: var(--dc-sky-400);
  --chart-3: var(--dc-green-300);
  --chart-4: var(--dc-amber-300);
  --chart-5: var(--dc-magenta-300);

  /* ============ TYPOGRAPHY ============ */
  --font-sans:    "Nunito Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Nunito", "Nunito Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;
  --fw-black:    900;

  /* Type scale — base 16 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ============ SPACING — base 4px ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============ RADII ============
     La marca es rounded — tendemos a radios generosos, sin llegar al pill
     gratuito. Pills se reservan para chips, badges y avatares. */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* default para inputs y botones */
  --radius-lg:  14px;   /* tarjetas */
  --radius-xl:  20px;   /* paneles grandes, modales */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============ ELEVATION / SHADOWS ============
     Sombras suaves, color-tinted hacia el navy en lugar de negro puro.
     Evitamos drop shadows duros. */
  --shadow-xs: 0 1px 2px rgba(11, 42, 95, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 42, 95, 0.08), 0 1px 2px rgba(11, 42, 95, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 42, 95, 0.08), 0 2px 4px rgba(11, 42, 95, 0.04);
  --shadow-lg: 0 12px 28px rgba(11, 42, 95, 0.10), 0 4px 8px rgba(11, 42, 95, 0.04);
  --shadow-xl: 0 24px 48px rgba(11, 42, 95, 0.14), 0 8px 16px rgba(11, 42, 95, 0.06);

  --shadow-focus: 0 0 0 3px rgba(42, 170, 228, 0.35);   /* sky-400 a 35% */
  --shadow-focus-danger: 0 0 0 3px rgba(246, 60, 115, 0.30);

  /* Inner shadow para campos hundidos / chip pressed */
  --shadow-inset: inset 0 1px 2px rgba(11, 42, 95, 0.06);

  /* ============ MOTION ============
     Transiciones cortas y didácticas. Sin bounces.
     Easing por defecto: ease-out — la UI "llega" al estado, no rebota. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* ============ Z-INDEX ============ */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ============ LAYOUT ============ */
  --content-max: 1200px;
  --sidebar-w: 264px;
  --header-h: 64px;
}

/* ---------- DARK THEME ---------- */
:root[data-theme="dark"], .theme-dark {
  --bg-app:       var(--dc-ink-900);
  --bg-surface:   var(--dc-ink-800);
  --bg-surface-2: #222942;
  --bg-sunken:    #0A0F1E;
  --bg-overlay:   rgba(0, 0, 0, 0.6);

  --fg-1: #FFFFFF;
  --fg-2: #D4DAE4;
  --fg-3: #8893A8;
  --fg-4: #5E6A82;
  --fg-link: var(--dc-sky-300);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --action-primary-bg:        var(--dc-sky-400);
  --action-primary-bg-hover:  var(--dc-sky-300);
  --action-primary-fg:        var(--dc-ink-900);
  --action-ghost-fg:          var(--dc-sky-300);
  --action-ghost-bg-hover:    rgba(42, 170, 228, 0.12);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Estilos por defecto que cualquier doc puede heredar.
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1 {
  font-size: var(--fs-40);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
h3 {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h4 {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
h5 {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
}
h6 {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

p {
  margin: 0 0 var(--space-3) 0;
  color: var(--fg-2);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--dc-navy-700); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

small, .text-meta {
  font-size: var(--fs-13);
  color: var(--fg-3);
}

.text-eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

/* Tabular nums for dashboards / amounts — voz exige tabular en montos */
.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ============================================================
   BRAND GRADIENT — la firma visual de DataCultura Projects
   Rara vez como fondo entero; sí como acento en hero, header,
   cintas decorativas, focus de elementos importantes.
   ============================================================ */
.brand-gradient-bar {
  background: linear-gradient(
    90deg,
    var(--dc-navy)    0%,
    var(--dc-sky)     25%,
    var(--dc-green)   50%,
    var(--dc-amber)   75%,
    var(--dc-magenta) 100%
  );
}
.brand-gradient-soft {
  background: linear-gradient(
    135deg,
    rgba(23, 83, 173, 0.08),
    rgba(42, 170, 228, 0.06) 30%,
    rgba(95, 200, 89, 0.04) 60%,
    rgba(254, 195, 37, 0.04) 80%,
    rgba(246, 60, 115, 0.05)
  );
}