/*
 * Financial Dashboard — Design Tokens
 * Drop into: static/css/design-tokens.css
 * Import in your base template: <link rel="stylesheet" href="{{ url_for('static', filename='css/design-tokens.css') }}">
 * Generated for: Parque COBS / financial dashboard module
 */

:root {

  /* ─── Color ramps ─────────────────────────────────────────────────────── */

  /* Green — positive / gain */
  --c-green-50:  #EAF3DE;
  --c-green-100: #C0DD97;
  --c-green-200: #97C459;
  --c-green-400: #639922;
  --c-green-600: #3B6D11;
  --c-green-800: #27500A;
  --c-green-900: #173404;

  /* Red — negative / loss */
  --c-red-50:  #FCEBEB;
  --c-red-100: #F7C1C1;
  --c-red-200: #F09595;
  --c-red-400: #E24B4A;
  --c-red-600: #A32D2D;
  --c-red-800: #791F1F;
  --c-red-900: #501313;

  /* Blue — informational / neutral */
  --c-blue-50:  #E6F1FB;
  --c-blue-100: #B5D4F4;
  --c-blue-200: #85B7EB;
  --c-blue-400: #378ADD;
  --c-blue-600: #185FA5;
  --c-blue-800: #0C447C;
  --c-blue-900: #042C53;

  /* Amber — warning / stale data */
  --c-amber-50:  #FAEEDA;
  --c-amber-100: #FAC775;
  --c-amber-200: #EF9F27;
  --c-amber-400: #BA7517;
  --c-amber-600: #854F0B;
  --c-amber-800: #633806;
  --c-amber-900: #412402;

  /* Gray — structural chrome / borders / flat state */
  --c-gray-50:  #F1EFE8;
  --c-gray-100: #D3D1C7;
  --c-gray-200: #B4B2A9;
  --c-gray-400: #888780;
  --c-gray-600: #5F5E5A;
  --c-gray-800: #444441;
  --c-gray-900: #2C2C2A;

  /* ─── Semantic tokens (financial domain) ──────────────────────────────── */

  /* Change direction */
  --fid-positive-bg:     var(--c-green-50);
  --fid-positive-text:   var(--c-green-600);
  --fid-positive-stroke: var(--c-green-600);
  --fid-positive-fill:   rgba(59, 109, 17, 0.08);   /* sparkline area fill */

  --fid-negative-bg:     var(--c-red-50);
  --fid-negative-text:   var(--c-red-600);
  --fid-negative-stroke: var(--c-red-600);
  --fid-negative-fill:   rgba(163, 45, 45, 0.08);

  --fid-flat-bg:         var(--c-gray-50);
  --fid-flat-text:       var(--c-gray-600);
  --fid-flat-stroke:     var(--c-gray-400);

  --fid-info-bg:         var(--c-blue-50);
  --fid-info-text:       var(--c-blue-600);

  --fid-warning-bg:      var(--c-amber-50);
  --fid-warning-text:    var(--c-amber-600);

  /* Range bar (52-week / YTD) */
  --fid-range-track:     var(--c-blue-100);
  --fid-range-fill:      var(--c-blue-200);
  --fid-range-dot:       var(--c-blue-600);

  /* ─── Typography ──────────────────────────────────────────────────────── */

  --fid-font:       'Inter', system-ui, -apple-system, sans-serif;
  --fid-font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  --fid-text-xs:    11px;  /* column headers, sub-labels */
  --fid-text-sm:    12px;  /* badge text, range labels   */
  --fid-text-base:  13px;  /* table body                 */
  --fid-text-md:    13px;  /* asset name (500 weight)    */
  --fid-text-lg:    15px;  /* section title              */

  --fid-weight-normal: 400;
  --fid-weight-medium: 500;

  /* ─── Layout & spacing ────────────────────────────────────────────────── */

  --fid-row-height:   42px;
  --fid-cell-px:      10px;
  --fid-cell-py:       9px;
  --fid-section-gap:  1.25rem;
  --fid-card-pad:     1rem 1.25rem;

  --fid-border:       0.5px solid var(--c-gray-100);
  --fid-border-hover: 0.5px solid var(--c-gray-200);

  --fid-radius-badge:  4px;
  --fid-radius-card:  12px;
  --fid-radius-input:  8px;

  /* ─── Sparkline canvas ────────────────────────────────────────────────── */

  --fid-spark-w:       90px;
  --fid-spark-h:       28px;
  --fid-spark-stroke:  1.5px;  /* use in JS: ctx.lineWidth = 1.5 */
}


/* ─── Utility classes ──────────────────────────────────────────────────── */

.fid-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fid-text-sm);
  font-weight: var(--fid-weight-medium);
  padding: 2px 7px;
  border-radius: var(--fid-radius-badge);
  font-family: var(--fid-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fid-badge--up   { background: var(--fid-positive-bg); color: var(--fid-positive-text); }
.fid-badge--dn   { background: var(--fid-negative-bg); color: var(--fid-negative-text); }
.fid-badge--flat { background: var(--fid-flat-bg);     color: var(--fid-flat-text);     }
.fid-badge--info { background: var(--fid-info-bg);     color: var(--fid-info-text);     }
.fid-badge--warn { background: var(--fid-warning-bg);  color: var(--fid-warning-text);  }

.fid-price {
  font-family: var(--fid-font-mono);
  font-size: var(--fid-text-base);
  font-variant-numeric: tabular-nums;
}

.fid-range {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fid-range__bar {
  width: 80px;
  height: 4px;
  background: var(--fid-range-track);
  border-radius: 2px;
  position: relative;
}

.fid-range__fill {
  height: 100%;
  background: var(--fid-range-fill);
  border-radius: 2px;
}

.fid-range__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fid-range-dot);
  position: absolute;
  top: -1.5px;
  transform: translateX(-50%);
}

.fid-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fid-font);
  font-size: var(--fid-text-base);
}

.fid-table th {
  font-size: var(--fid-text-xs);
  font-weight: var(--fid-weight-medium);
  color: var(--c-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px var(--fid-cell-px);
  text-align: right;
  border-bottom: var(--fid-border);
}

.fid-table th:first-child { text-align: left; }

.fid-table td {
  padding: var(--fid-cell-py) var(--fid-cell-px);
  text-align: right;
  border-bottom: var(--fid-border);
  vertical-align: middle;
}

.fid-table td:first-child { text-align: left; }
.fid-table tr:last-child td { border-bottom: none; }
.fid-table tr:hover td { background: var(--c-gray-50); }

.fid-asset-name {
  font-size: var(--fid-text-md);
  font-weight: var(--fid-weight-medium);
}

.fid-asset-sub {
  font-size: var(--fid-text-xs);
  color: var(--c-gray-400);
  margin-top: 1px;
}

.fid-card {
  background: #fff;
  border: var(--fid-border);
  border-radius: var(--fid-radius-card);
  padding: var(--fid-card-pad);
}