/* ==========================================================================
   Equilibrium — brand tokens
   Canonical source: BRAND.md v1.0 (Equilibrium Tech Solutions (Pty) Ltd)
   Vendored file — do not edit locally. Re-copy from the brand master.
   ========================================================================== */

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

:root {
  /* ── Brand palette ── */
  --eq-navy:        #0B1F3A;
  --eq-deep-blue:   #123A6F;
  --eq-baby-blue:   #A7C7E7;
  --eq-ice-blue:    #DCEAF7;
  --eq-light-grey:  #F4F6F8;
  --eq-charcoal:    #2B2B2B;

  /* Aliases — prefer these in component code */
  --eq-primary:       var(--eq-navy);
  --eq-primary-hover: var(--eq-deep-blue);
  --eq-accent:        var(--eq-baby-blue);
  --eq-canvas:        var(--eq-light-grey);
  --eq-surface:       #FFFFFF;

  /* ── Semantic — state only ── */
  --eq-success:      #15803D;
  --eq-success-bg:   #DCFCE7;
  --eq-warning:      #B45309;
  --eq-warning-bg:   #FEF3C7;
  --eq-danger:       #DC2626;
  --eq-danger-text:  #B91C1C;
  --eq-danger-bg:    #FEE2E2;
  --eq-neutral:      #5C6470;
  --eq-neutral-bg:   #EEF1F4;

  /* ── Text ── */
  --eq-text:           var(--eq-charcoal);
  --eq-text-secondary: #5C6470;
  --eq-text-helper:    #8A9099;
  --eq-text-on-navy:   #FFFFFF;

  /* ── Borders ── */
  --eq-border:          #DDE1E7;
  --eq-border-subtle:   #F2F4F7;
  --eq-border-disabled: #E2E6EA;
  --eq-disabled-text:   #A8AEB6;

  /* ── Sidebar (navy chrome) ── */
  --eq-nav-active-bg:   rgba(167, 199, 231, .16);
  --eq-nav-inactive:    rgba(255, 255, 255, .60);
  --eq-nav-divider:     rgba(255, 255, 255, .08);

  /* ── Type ── */
  --eq-font-heading: 'Montserrat', system-ui, sans-serif;
  --eq-font-body:    'Open Sans', system-ui, sans-serif;

  --eq-size-page-title:   28px;
  --eq-size-section:      19px;
  --eq-size-card-title:   15px;
  --eq-size-body:         14px;
  --eq-size-helper:       12.5px;
  --eq-size-eyebrow:      11px;
  --eq-tracking-eyebrow:  .08em;

  --eq-leading-tight: 1.2;
  --eq-leading-body:  1.65;

  /* ── Shape ── */
  --eq-radius-sm:    6px;   /* button, input */
  --eq-radius-md:   12px;   /* card, panel */
  --eq-radius-pill: 14px;   /* badge */
  --eq-radius-tile: 16px;   /* icon tile */
  --eq-border-width: 1.5px;

  /* ── Space ── */
  --eq-space-1:  4px;
  --eq-space-2:  8px;
  --eq-space-3: 12px;
  --eq-space-4: 16px;
  --eq-space-5: 22px;
  --eq-space-6: 32px;
  --eq-space-7: 52px;

  --eq-row-height:       40px;
  --eq-row-height-total: 44px;

  /* ── Elevation ── */
  --eq-shadow-card:    0 1px 3px rgba(11, 31, 58, .08);
  --eq-shadow-raised:  0 8px 32px rgba(11, 31, 58, .14);
  --eq-focus-ring:     0 0 0 3px rgba(18, 58, 111, .08);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  background: var(--eq-canvas);
  color: var(--eq-text);
  font-family: var(--eq-font-body);
  font-size: var(--eq-size-body);
  line-height: var(--eq-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--eq-font-heading);
  font-weight: 800;
  color: var(--eq-navy);
  line-height: var(--eq-leading-tight);
  margin: 0;
}

a          { color: var(--eq-deep-blue); }
a:hover    { color: var(--eq-navy); }

/* ── Utilities ────────────────────────────────────────────────────────── */

/* Every monetary figure. Right-aligned, tabular, decimal-aligned. */
.eq-money {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Uppercase Montserrat label — column heads, eyebrows */
.eq-eyebrow {
  font-family: var(--eq-font-heading);
  font-weight: 700;
  font-size: var(--eq-size-eyebrow);
  letter-spacing: var(--eq-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eq-text-secondary);
}

.eq-helper {
  font-size: var(--eq-size-helper);
  color: var(--eq-text-helper);
}