/* ============================================================
 * IG Tech Advisory · brand tokens
 * Replica EXACTA del panel real (panel/assets/panel.css):
 * navy scale + verde + grises zinc + cabecera navy.
 * La app se ve como la version movil de tu panel.
 * Tipografia identica a igtechadvisory.com.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Primitive (del panel) ---- */
  --navy-50:  #EAEDF2;
  --navy-100: #C8D0DC;
  --navy-300: #7187A0;
  --navy-500: #2E4763;
  --navy-600: #0F2A44;
  --navy-700: #0B2138;
  --navy-800: #07182A;
  --green:      #22C55E;
  --green-dark: #16A34A;
  --green-bg:   #E8FAEE;
  --red:        #DC2626;
  --red-bg:     #FEF2F2;
  --amber:      #D97706;
  --amber-bg:   #FEF3C7;

  /* ---- Semantic ---- */
  --color-bg:           #FAFAFA;
  --color-surface:      #F4F4F5;
  --color-surface-2:    #FFFFFF;
  --color-card:         #FFFFFF;
  --color-card-hover:   #FAFAFA;
  --color-text:         #18181B;
  --color-text-muted:   #5C6B7A;
  --color-border:       #E4E4E7;
  --color-border-hover: #D4D4D8;

  --color-primary:      var(--navy-600);
  --color-primary-fg:   #FFFFFF;
  --color-accent:       var(--green);

  --color-info-bg:      var(--navy-50);
  --color-info-fg:      var(--navy-600);
  --color-success-bg:   var(--green-bg);
  --color-success-fg:   var(--green-dark);
  --color-warn-bg:      var(--amber-bg);
  --color-warn-fg:      var(--amber);
  --color-danger-bg:    var(--red-bg);
  --color-danger-fg:    var(--red);

  /* ---- Typography (= igtechadvisory.com) ---- */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-heavy:     800;
  --fw-black:     800;

  /* ---- Geometry (del panel) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px 0 rgb(15 42 68 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(15 42 68 / 0.08), 0 2px 4px -2px rgb(15 42 68 / 0.04);
  --shadow-lg: 0 12px 24px -6px rgb(15 42 68 / 0.12);

  /* ---- Component overrides ---- */
  /* Cabecera navy como el topbar del panel */
  --header-bg:        var(--navy-600);
  --header-fg:        #FFFFFF;
  --header-fg-muted:  rgba(255, 255, 255, 0.62);
  --header-border:    var(--navy-700);
  --header-blur:      none;

  --btn-primary-bg:     var(--navy-600);
  --btn-primary-fg:     #FFFFFF;
  --btn-primary-shadow: 0 4px 8px -2px rgb(15 42 68 / 0.25);
  --display-gradient:   none;
  --fab-bg:             var(--green);   /* FAB verde para destacar la accion */
}

/* Banda de acento verde bajo la cabecera, como los workspaces del panel */
.app-header { border-bottom-width: 0; box-shadow: inset 0 -3px 0 0 var(--green); }