/* Enix 3.0 Design Tokens — Stage 1
   --------------------------------------------------------------
   Source of truth: Enix3Proto (1).html at the project root.
   Load order: this file MUST be the first stylesheet in index.html
   so every other CSS (Bootstrap, Telerik/Kendo, Syncfusion, app
   CSS) can resolve var(--token) references against it.

   Do NOT add component-specific rules to this file. Only token
   declarations live here. Component styling will be layered in
   later stages on top of these variables.
   -------------------------------------------------------------- */

:root {
  /* ── Brand / palette ──────────────────────────────────────── */
  --navy:        #0d2240;
  --navy2:       #1a3a5c;
  --blue:        #1e5fa8;
  --blue-lt:     #eff6ff;
  --blue-md:     #dbeafe;
  --accent:      #f97316;
  --gold:        #f59e0b;
  --purple:      #7c3aed;
  --purple-lt:   #f5f3ff;
  --teal:        #0ea5e9;
  --green:       #16a34a;
  --green-lt:    #dcfce7;
  --amber:       #d97706;
  --amber-lt:    #fef3c7;
  --indigo:      #4f46e5;
  --indigo-lt:   #eef2ff;
  --rose:        #e11d48;
  --rose-lt:     #fff1f2;
  --emerald:     #059669;
  --emerald-lt:  #d1fae5;
  --red:         #bd5656;
  --red-lt:      #fee2e2;
  --yellow-lt:   #fef9c3;
  --yellow:      #854d0e;
  --white:       #ffffff;
  --gray50:      #f8fafc;
  --gray100:     #f1f5f9;
  --gray200:     #e2e8f0;
  --gray400:     #94a3b8;
  --gray500:     #64748b;
  --gray600:     #475569;
  --gray700:     #334155;
  --gray800:     #1e293b;

  /* ── Radius & shadow ──────────────────────────────────────── */
  --r:           12px;     /* default border-radius */
  --r-sm:        8px;
  --r-lg:        18px;
  --r-full:      9999px;
  --sh:          0 2px 12px rgba(0, 0, 0, .08);
  --sh-lg:       0 8px 40px rgba(0, 0, 0, .16);
  --sh-sm:       0 1px 4px  rgba(0, 0, 0, .06);

  /* ── Typography ───────────────────────────────────────────── */
  --font-base:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-nav:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs:     10.5px;
  --text-sm:     12px;
  --text-md:     13.5px;
  --text-base:   14px;
  --text-lg:     15px;
  --text-xl:     17px;
  --text-2xl:    20px;
  --text-3xl:    24px;
  --fw-normal:   400;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ══════════════════════════════════════════════════════════
     SEMANTIC TOKENS  —  derived from the palette above.
     Use these in component CSS instead of the raw palette
     values whenever the role is meaningful (surface, badge…).
     ══════════════════════════════════════════════════════════ */

  /* Surfaces */
  --surface-page:        var(--gray50);
  --surface-card:        var(--white);
  --surface-border:      var(--gray200);

  /* Navigation */
  --nav-topbar-bg:       var(--navy);
  --nav-topbar-text:     rgba(255, 255, 255, .7);
  --nav-navbar-bg:       var(--white);
  --nav-navbar-height:   60px;
  --nav-navbar-border:   var(--gray200);
  --nav-modulebar-bg:    var(--white);
  /* Duplica --nav-navbar-height (la module bar arranca donde termina el navbar): los dos se
     cambian JUNTOS o la barra queda pisada / con un hueco. */
  --nav-modulebar-top:   60px;
  /* Eliminada; el token se mantiene en 0 para que los calc(... + modulebar + N)
     existentes colapsen al valor correcto sin tocar cada archivo. */
  --nav-modulebar-height: 0px;
  --nav-product-tabs-height: 60px;
  --nav-subtabs-height:  38px;
  --nav-summary-height:  46px;
  --nav-active-color:    var(--blue);

  /* Interactive */
  --btn-primary-bg:      var(--blue);
  --btn-primary-hover:   #1a52c7;
  --btn-primary-text:    #ffffff;
  --input-height:        42px;
  --input-border:        var(--gray200);
  --input-border-focus:  var(--blue);
  --input-radius:        var(--r-sm);
  --input-focus-ring:    0 0 0 3px rgba(30, 95, 168, .10);

  /* Status badges */
  --badge-success-bg:    var(--green-lt);
  --badge-success-text:  var(--green);
  --badge-warning-bg:    var(--amber-lt);
  --badge-warning-text:  var(--amber);
  --badge-error-bg:      var(--red-lt);
  --badge-error-text:    var(--red);
  --badge-info-bg:       var(--blue-md);
  --badge-info-text:     var(--blue);
  --badge-neutral-bg:    var(--gray100);
  --badge-neutral-text:  var(--gray600);
}