/* ==========================================================
   NICARAGUA EN LÍNEA — COLOR SYSTEM v2
   Single source of truth. Load this BEFORE tokens.css.

   Derived from the official platform logo:
   · Deep blue anchor  hsl(215, 78%, 33%) → #124696  (brand-800)
   · Bright blue anchor hsl(209, 78%, 49%) → #1E7DDD  (brand-600)
   All neutrals share the same cool hue family for tonal coherence.
   All state colors use identical saturation/lightness rules.

   Every listed foreground/background pairing has been contrast-tested
   against WCAG 2.2. See docs/color-audit.md for the full report.
   ========================================================== */

:root {
  /* ===== 1. BRAND SCALE (from logo) ===== */
  /* Same hue family, only lightness changes.
     Use these when the meaning is "brand". */
  --nel-brand-950: #0A2A5C;   /* Deepest — footer, dark panels */
  --nel-brand-900: #0E3878;   /* Deep — display text on light, chip text on brand-100 */
  --nel-brand-800: #124696;   /* PRIMARY — buttons, headers, key surfaces (Logo deep blue) */
  --nel-brand-700: #1657B4;   /* Primary hover */
  --nel-brand-600: #1E7DDD;   /* ACCENT — links, focus, highlights (Logo bright blue) */
  --nel-brand-500: #3A95EC;   /* Accent hover */
  --nel-brand-400: #7DBAF4;   /* Accent on dark backgrounds */
  --nel-brand-300: #B8D6F8;   /* Decorative */
  --nel-brand-200: #D9E6F9;   /* Chip border, subtle divider */
  --nel-brand-100: #EAF1FB;   /* Chip background, gentle highlight */
  --nel-brand-50:  #F3F6FC;   /* Page tinted band */

  /* ===== 2. INK / NEUTRAL SCALE ===== */
  /* Cool-neutral, sharing the same undertone as brand.
     Use these for text, borders, surfaces. */
  --nel-ink-950: #0B1220;
  --nel-ink-900: #0F172A;   /* TEXT STRONG — headings, primary text */
  --nel-ink-800: #1E2A44;
  --nel-ink-700: #334158;   /* TEXT DEFAULT — body */
  --nel-ink-600: #4A5A75;
  --nel-ink-500: #66768F;   /* TEXT MUTED — captions, meta (AA ≥14px only) */
  --nel-ink-400: #8695AD;   /* Placeholder, subtle icons */
  --nel-ink-300: #B4BFD1;   /* Disabled text */
  --nel-ink-200: #D8DFEC;   /* BORDER STRONG — table divider, section hairline */
  --nel-ink-150: #E5EAF2;   /* BORDER DEFAULT — cards, inputs */
  --nel-ink-100: #EEF2F8;   /* BORDER SOFT — subtle divider */
  --nel-ink-50:  #F5F7FB;   /* CANVAS — page background */
  --nel-white:   #FFFFFF;   /* SURFACE — card / input */

  /* ===== 3. STATE COLORS ===== */
  /* Only ever use as pair: text-700 on tint-100. */
  --nel-success-700: #0B6B44;
  --nel-success-600: #0F855A;
  --nel-success-100: #DEF4E9;

  --nel-warning-700: #8C4405;
  --nel-warning-600: #B25D0B;
  --nel-warning-100: #FBEDD4;

  --nel-danger-700:  #8F1D14;
  --nel-danger-600:  #B42318;
  --nel-danger-100:  #FBE0DE;

  --nel-info-700:    #0E4A97;   /* == brand-family, for info alerts */
  --nel-info-600:    #1E7DDD;   /* == brand-600 */
  --nel-info-100:    #E4EFFC;

  /* ===== 4. WARM NEUTRAL (illustrations only) ===== */
  /* Used exclusively inside 2.5D illustrations and the hero warm band.
     NEVER use for text or interactive elements. */
  --nel-warm-canvas: #FAF7F1;
  --nel-warm-sand:   #E8CFA0;
  --nel-warm-coral:  #F0A585;

  /* ===== 5. SEMANTIC ALIASES (this is the layer components should use) ===== */

  /* ——— Text ——— */
  --nel-text-strong:   var(--nel-ink-900);
  --nel-text-default:  var(--nel-ink-700);
  --nel-text-muted:    var(--nel-ink-500);
  --nel-text-subtle:   var(--nel-ink-400);   /* placeholder */
  --nel-text-disabled: var(--nel-ink-300);
  --nel-text-inverse:  var(--nel-white);
  --nel-text-brand:    var(--nel-brand-800); /* text/link deep, use for readable links */
  --nel-text-accent:   var(--nel-brand-600); /* only for large text / decorative */

  /* ——— Surface ——— */
  --nel-bg-canvas:      var(--nel-ink-50);
  --nel-bg-canvas-warm: var(--nel-warm-canvas);
  --nel-bg-surface:     var(--nel-white);
  --nel-bg-surface-2:   var(--nel-ink-100);
  --nel-bg-brand:       var(--nel-brand-800);
  --nel-bg-brand-soft:  var(--nel-brand-100);
  --nel-bg-brand-tint:  var(--nel-brand-50);
  --nel-bg-dark:        var(--nel-ink-900);   /* dark sidebar / footer */

  /* ——— Border ——— */
  --nel-border-soft:    var(--nel-ink-100);
  --nel-border-default: var(--nel-ink-150);
  --nel-border-strong:  var(--nel-ink-200);
  --nel-border-brand:   var(--nel-brand-200);
  --nel-border-accent:  var(--nel-brand-600);

  /* ——— Interactive (buttons, links) ——— */
  --nel-action-primary:            var(--nel-brand-800);
  --nel-action-primary-hover:      var(--nel-brand-900);
  --nel-action-primary-active:     var(--nel-brand-950);
  --nel-action-primary-disabled:   var(--nel-ink-300);
  --nel-action-primary-fg:         var(--nel-white);

  --nel-action-accent:             var(--nel-brand-600);
  --nel-action-accent-hover:       var(--nel-brand-700);
  --nel-action-accent-active:      var(--nel-brand-800);
  --nel-action-accent-fg:          var(--nel-white);

  --nel-action-secondary-bg:       var(--nel-white);
  --nel-action-secondary-border:   var(--nel-ink-200);
  --nel-action-secondary-fg:       var(--nel-ink-900);
  --nel-action-secondary-hover-bg: var(--nel-ink-50);

  --nel-action-ghost-fg:           var(--nel-ink-700);
  --nel-action-ghost-hover-bg:     var(--nel-ink-100);

  --nel-link:                      var(--nel-brand-800);
  --nel-link-hover:                var(--nel-brand-900);
  --nel-link-visited:              var(--nel-brand-900);

  /* ——— Focus (accessible ring, same accent hue) ——— */
  --nel-focus-ring: 0 0 0 3px rgba(30, 125, 221, .28);

  /* ——— State semantics ——— */
  --nel-state-success-bg: var(--nel-success-100);
  --nel-state-success-fg: var(--nel-success-700);
  --nel-state-warning-bg: var(--nel-warning-100);
  --nel-state-warning-fg: var(--nel-warning-700);
  --nel-state-danger-bg:  var(--nel-danger-100);
  --nel-state-danger-fg:  var(--nel-danger-700);
  --nel-state-info-bg:    var(--nel-info-100);
  --nel-state-info-fg:    var(--nel-info-700);

  /* ——— Institution chip (TELCOR piloto) ——— */
  --nel-chip-inst-bg:     var(--nel-brand-100);
  --nel-chip-inst-fg:     var(--nel-brand-900);
  --nel-chip-inst-border: var(--nel-brand-200);
  --nel-chip-inst-dot:    var(--nel-brand-800);

  /* ==========================================================
     6. LEGACY BRIDGE (do not remove until deprecated names are purged)
     Keeps existing components working while migrating.
     ========================================================== */
  --nel-brand:            var(--nel-brand-800);
  --nel-brand-ink:        var(--nel-brand-900);
  --nel-brand-soft:       var(--nel-brand-100);
  --nel-brand-mid:        var(--nel-brand-200);
  --nel-accent:           var(--nel-brand-600);
  --nel-accent-ink:       var(--nel-brand-800);   /* was 084E97 — now the deeper primary for legibility */
  --nel-accent-soft:      var(--nel-info-100);

  --nel-canvas:           var(--nel-bg-canvas);
  --nel-canvas-warm:      var(--nel-bg-canvas-warm);
  --nel-surface:          var(--nel-white);
  --nel-surface-2:        var(--nel-ink-100);
  --nel-overlay:          rgba(15, 23, 42, .48);

  --nel-line:             var(--nel-border-default);
  --nel-line-strong:      var(--nel-border-strong);
  --nel-line-soft:        var(--nel-border-soft);

  --nel-fg:               var(--nel-text-strong);
  --nel-fg-secondary:     var(--nel-text-default);
  --nel-fg-muted:         var(--nel-text-muted);
  --nel-fg-subtle:        var(--nel-text-subtle);
  --nel-fg-inverse:       var(--nel-white);

  --nel-success:          var(--nel-success-600);
  --nel-success-soft:     var(--nel-success-100);
  --nel-success-ink:      var(--nel-success-700);
  --nel-warning:          var(--nel-warning-600);
  --nel-warning-soft:     var(--nel-warning-100);
  --nel-warning-ink:      var(--nel-warning-700);
  --nel-danger:           var(--nel-danger-600);
  --nel-danger-soft:      var(--nel-danger-100);
  --nel-danger-ink:       var(--nel-danger-700);
  --nel-info:             var(--nel-info-600);
  --nel-info-soft:        var(--nel-info-100);

  --nel-sand:             var(--nel-warm-sand);
  --nel-coral:            var(--nel-warm-coral);
  --nel-mint:             #7FBFA8;

  --nel-shadow-brand:     0 8px 24px rgba(18, 70, 150, .18);
}

/* ===== Logo tinting presets =====
   Apply these to any wrapper of a [data-nel-logo] element to force its coloring.
   The SVG uses currentColor for the "deep face" + wordmark, and --nel-logo-accent
   for the fold, wifi arcs and dot.
*/
.on-dark {
  color: #FFFFFF;
  --nel-logo-accent: var(--nel-brand-400, #7DBAF4);
}
.on-brand {
  color: #FFFFFF;
  --nel-logo-accent: var(--nel-brand-300, #B8D6F8);
}
.on-light {
  color: var(--nel-brand-800, #124696);
  --nel-logo-accent: var(--nel-brand-600, #1E7DDD);
}
/* Any [data-nel-logo] wrapper renders inline-flex with SVG as inline block.
   Guarantee no accidental borders/backgrounds/rounded boxes leak in. */
[data-nel-logo] {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
[data-nel-logo] svg { display: block; height: 100%; }