/* wwwroot/css/gi-tokens.css */
:root {
  /* =========================
     COLOR PALETTE (RAW)
     ========================= */

  /* Brand / Membership */
  --gi-blue-membership: #4375B0;

  /* Grading */
  --gi-grade-high: #68C780;
  --gi-grade-medium: #E9C46A;
  --gi-grade-low: #E76F51;

  /* Status */
  --gi-error: #B81F15;
  --gi-success: #15B860;

  /* Greys */
  --gi-gray-10: #111827; /* near-black: best for headers/topbar text */
  --gi-gray-20: #1F2937; /* strong text */
  --gi-gray-30: #374151; /* body text */
  --gi-gray-40: #6B7280; /* muted text */
  --gi-gray-50: #E5E7EB; /* borders / dividers */

  /* Greens */
  --gi-green-10: #038122;
  --gi-green-20: #008F24;
  --gi-green-30: #04A12B;
  --gi-green-40: #36B455; /* Button */
  --gi-green-50: #68C780; /* Same as grade-high */
  --gi-green-60: #CDECD5;
  --gi-green-70: #E7FBEC;

  /* Green overlays (from your 61% / 22% / 9%) */
  --gi-green-50-a61: rgba(104, 199, 128, 0.61);
  --gi-green-50-a22: rgba(104, 199, 128, 0.22);
  --gi-green-50-a09: rgba(104, 199, 128, 0.09);

  /* Yellows */
  --gi-yellow-10: #FEF3C2;
  --gi-yellow-20: #FEF7D4;
  --gi-yellow-30: #FFF9E1;
  --gi-yellow-40: #FFFCE6; /* Background */
  --gi-yellow-50: #FFFFDF;

  /* White */
  --gi-white: #FFFFFF;

   /* Grading */
  --gi-grade-low:  #E76F51;  /* Concerning */
  --gi-grade-med:  #E9C46A;  /* Acceptable */
  --gi-grade-high: #68C780;  /* Favorable */

  /* Optional: neutral state for "Not Enough Info" */
  --gi-grade-na:   var(--gi-gray-50);

  /* =========================
     TYPOGRAPHY (RAW)
     ========================= */
  --gi-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gi-font-decorative: "Courgette", cursive;

  /* Line-heights */

  --gi-lh-tight: 1.15;   /* banners/headings */
  --gi-lh-snug: 1.3;     /* UI labels/buttons */
  --gi-lh-normal: 1.5;   /* paragraphs */


  /* Font weights */
  --gi-fw-light: 300;
  --gi-fw-regular: 400;
  --gi-fw-semibold: 600;
  --gi-fw-bold: 700;
  
  /* Font sizes */
  --gi-fs-40: clamp(2.25rem, 4vw + 1rem, 8rem);  
  --gi-fs-32: clamp(2.25rem, 2.2vw + 1rem, 5rem);       
  --gi-fs-24: clamp(2rem, 1.4vw + 0.9rem, 3.5rem);   
  --gi-fs-22: clamp(1.75rem, 1.2vw + 0.85rem, 2.5rem); 
  --gi-fs-20: clamp(1.15rem, 1vw + 0.75rem, 2rem);     
  --gi-fs-18: clamp(0.75rem, 0.6vw + 0.85rem, 1.125rem);   
  --gi-fs-16: 1rem;      
  --gi-fs-14: 0.875rem;  
  --gi-fs-12: 0.75rem;   
  --gi-fs-10: 0.625rem;  


  /* =========================
     SPACING (RAW)
     ========================= */
  --gi-0: 0;
  --gi-1: 0.25rem;  /* 4px  */
  --gi-2: 0.5rem;   /* 8px  */
  --gi-3: 0.75rem;  /* 12px */
  --gi-4: 1rem;     /* 16px */
  --gi-5: 1.25rem;  /* 20px */
  --gi-6: 1.5rem;   /* 24px */
  --gi-7: 1.75rem;   /* 40px */
  --gi-8: 2rem;     /* 32px */
  --gi-10: 2.5rem;  /* 40px */
  --gi-12: 3rem;    /* 48px */

  /* =========================
     RADIUS + SHADOW (RAW)
     ========================= */
  /* Radii */
  --gi-r-xs: 6px;
  --gi-r-sm: 10px;
  --gi-r-md: 14px;
  --gi-r-lg: 18px;
  --gi-r-xl: 24px;

  /* Shadow */
  --gi-shadow-1: 0 8px 20px rgba(0,0,0,0.08);

    /* Border widths (keep px) */
  --gi-bw-0: 0;
  --gi-bw-1: 1px;
  --gi-bw-2: 2px;
  --gi-bw-3: 3px;

    /* Border colors */
  --gi-border-subtle: rgba(0,0,0,0.08);     
  --gi-border-light: var(--gi-green-60);
  --gi-border-strong: var(--gi-green-40);
  
  /* Focus ring */
  --gi-focus-ring: 0 0 0 3px var(--gi-green-40);
}

.gi-token-charge-card {
  border-radius: var(--gi-r-lg);
  background: var(--gi-yellow-30);
  padding: 0;
  box-shadow: var(--gi-shadow-1);
}

.gi-token-charge-card .gi-basicanalysis__body {
  padding: 0;
  background: transparent;
}

.gi-token-charge-card .gi-basicanalysis__body .table-responsive {
  margin: 0;
}

.gi-token-charge-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.gi-token-charge-table thead th {
  background: var(--gi-green-50);
  font-weight: var(--gi-fw-semibold);
}

.gi-token-charge-table thead th button {
  color: var(--gi-white);
  font-size: var(--gi-fs-18);
}

.gi-token-charge-table td,
.gi-token-charge-table th {
  padding: var(--gi-3) var(--gi-4);
}

.gi-token-charge-header-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--gi-white);
  font-size: var(--gi-fs-18);
  font-weight: var(--gi-fw-semibold);
}

.gi-token-charge-table tbody tr + tr td {
  border-top: 1px solid var(--gi-gray-50);
}