/* MentorIA Consulting — Color tokens
   SOURCE OF TRUTH: the user's own "mentoria-identidad" brand-identity skill
   (uploads/mentoria-identidad.skill → SKILL.md + scripts/mentoria_docx.js),
   which defines the company's official document/deliverable color values.
   These exact hex values are used verbatim — never rounded or re-derived.
   (Earlier revision of this file pixel-sampled the logo directly; those values
   are kept only where the identity skill doesn't define an equivalent, e.g. the
   near-black canvas behind the dark-background logo lockup.) */

:root {
  /* ---- Base palette (official) ---- */
  --navy-950: #06132B;  /* deep canvas behind the dark logo lockup — sampled from the logo file itself, not in the identity skill */
  --navy-900: #1F3864;  /* OFFICIAL "navy titulares" — headings, primary brand color, primary button fill */
  --navy-800: #28477C;
  --navy-700: #325890;
  --navy-600: #3D6BA8;

  --blue-600: #2E74B5;  /* OFFICIAL "azul medio" — subtitles, rules, links, secondary accents */
  --blue-500: #4A8AC4;
  --blue-100: #E7F1FA;

  --gold-500: #C7A24A;  /* OFFICIAL brand gold — the "IA" (on light bg) + "Mentor"/"Consulting" (on navy) + the star mark */
  --gold-600: #8A6A1F;  /* darkened for AA-safe text/links on white — official hue, adjusted lightness only */
  --gold-300: #E4C87A;  /* lighter, for accent text/icons on navy where gold-500 needs more lift */
  --gold-100: #F3E9D2;  /* soft fill for badges/tints */

  --logo-ink: #030826;  /* OFFICIAL — reference ink color of the wordmark itself; do not use as a UI token */

  --white: #FFFFFF;
  --black: #000000;

  /* Neutral gray ramp — cool, kept close to the official body/muted text colors */
  --gray-50:  #F6F7F8;
  --gray-100: #EDEEF1;
  --gray-200: #DEE1E6;
  --gray-300: #C4C9D1;
  --gray-400: #9AA2AF;
  --gray-500: #6C7684;
  --gray-600: #555555;  /* OFFICIAL "muted" text */
  --gray-700: #414A57;
  --gray-800: #2B323C;
  --gray-900: #1A1F26;

  --text-body-official: #333333; /* OFFICIAL body text color */

  /* Semantic status — OFFICIAL note/resolved/pending box colors from the identity skill */
  --info-fill: #D5E8F0;
  --success-fill: #E4F2E8;
  --success-border: #2E9E5B;
  --success-text: #1F6B3A;
  --warning-fill: #FBF1DA;
  --warning-border: #C08A2E;
  --warning-text: #8A5A00;
  /* Danger has no official equivalent in the identity skill (no "error" box is defined) —
     kept as a cool-neutral-compatible red, used sparingly, flagged as a system addition. */
  --danger-500: #C4463D;
  --danger-100: #FBE9E7;

  /* Violeta: sin equivalente oficial en la skill de identidad — adición de sistema, igual que
     danger-500. Reservado para distinguir un estado puntual (ej. "Por confirmar" en gráficos de
     estado) de --blue-500/--gold-500 cuando ambos quedan cerca en tono sobre fondo navy. Elegido
     con luminosidad/saturación similares a --blue-500 para peso visual consistente. */
  --violet-400: #9B72CF;

  --success-500: var(--success-border);
  --success-100: var(--success-fill);
  --warning-500: var(--warning-border);
  --warning-100: var(--warning-fill);
  --info-500: var(--blue-600);
  --info-100: var(--info-fill);

  /* ---- Semantic aliases ---- */
  --surface-page: var(--white);
  --surface-canvas: var(--gray-50);
  --surface-card: var(--white);
  --surface-sunken: var(--gray-100);
  --surface-inverse: var(--navy-950);
  --surface-inverse-elevated: var(--navy-900);
  --surface-brand: var(--gold-500);
  --surface-brand-tint: var(--gold-100);

  --text-primary: var(--text-body-official);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--white);
  --text-inverse-secondary: var(--gray-300);
  --text-brand: var(--navy-900);
  --text-link: var(--blue-600);
  --text-link-hover: var(--navy-900);

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--navy-700);
  --border-brand: var(--gold-500);
  --border-inverse: rgba(255,255,255,0.14);

  --icon-primary: var(--navy-900);
  --icon-secondary: var(--gray-500);
  --icon-brand: var(--gold-600);
  --icon-inverse: var(--white);

  --focus-ring: var(--gold-500);
  --focus-ring-offset: var(--white);

  --overlay-scrim: rgba(6,19,43,0.55);
}

/* ---- Modo oscuro: navy, nunca negro puro ----
   El canvas y las tarjetas usan la propia escala navy de marca (navy-950/900/800) en vez de grises
   neutros u OLED-black — así el dorado de marca sigue siendo el acento cálido en ambos temas, en vez
   de leerse "genérico" contra un negro sin identidad. Toggle vía atributo [data-theme] en <html>,
   controlado por app.js (localStorage + preferencia del sistema como default). */
:root[data-theme="dark"] {
  --surface-page: var(--navy-950);
  --surface-canvas: var(--navy-950);
  --surface-card: var(--navy-800);
  --surface-sunken: var(--navy-900);
  --surface-inverse: var(--white);
  --surface-inverse-elevated: var(--gray-50);

  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-inverse: var(--navy-950);
  --text-inverse-secondary: var(--gray-700);
  --text-brand: var(--gold-300);
  --text-link: var(--blue-500);
  --text-link-hover: var(--gold-300);

  --border-subtle: var(--navy-700);
  --border-default: var(--navy-600);
  --border-strong: var(--gray-400);
  --border-inverse: rgba(6,19,43,0.35);

  --icon-primary: var(--gray-100);
  --icon-secondary: var(--gray-400);
  --icon-brand: var(--gold-300);
  --icon-inverse: var(--navy-950);

  --focus-ring-offset: var(--navy-950);

  /* Estados semánticos: mismo hue, ajustado para legibilidad sobre fondo oscuro.
     --danger-500 en particular se suaviza aquí (rojo más pastel/coral) — el rojo original
     (#C4463D) es muy saturado y sobre navy se ve "neón" / vibra, en vez de leerse como alerta seria. */
  --success-fill: rgba(46,158,91,0.18);
  --success-text: #6FCB94;
  --warning-fill: rgba(192,138,46,0.2);
  --warning-text: #E8B856;
  --danger-500: #E2776B;
  --danger-100: rgba(196,70,61,0.18);
  --info-fill: rgba(46,116,181,0.22);

  --overlay-scrim: rgba(0,0,0,0.55);
}