/* ============================================================================
   KOREVRA BIZ+ — TOKEN SYSTEM
   The single source of colour, elevation and geometry. Nothing below this
   file may hardcode a colour literal; tools/contrast-scan.js fails on it.

   Identity: "ledger green". Biz+ is the book that cannot burn — deep
   ink-green surfaces, an emerald brand, and GOLD reserved for money the owner
   WON (a debt recovered, a profitable day, a leak stopped). Coral is money
   owed / overdue / leaking. Indigo is the lender-facing trust surface.

   THREE RULES:
   1. A tint and its ink are a PAIR. Every --m-*-tint has a matching --m-*-ink
      that clears 4.5:1 on that tint AND on the surface it sits on.
   2. FILLED surfaces do not flip with theme (--m-*-fill + --on-fill).
   3. Gold is the WIN colour and nothing else.
   ==========================================================================*/

:root {
  /* ---- type ------------------------------------------------------------ */
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'DM Sans', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- geometry -------------------------------------------------------- */
  --r-1: 10px;  --r-2: 16px;  --r-3: 22px;  --r-4: 28px;  --r-pill: 999px;
  --tap: 44px;  --gut: 16px;

  /* Text on any FILLED (solid-hue) surface, in both themes. Never flips. */
  --on-fill: #FFFFFF;

  /* ---- filled gradients + their inks ------------------------------------
     Solved against BOTH stops:
       brand: #04261A on #2FD39A = 8.9 · on #1BAE7B = 5.8
       gold : #3A2A05 on #EFC974 = 8.8 · on #DFB350 = 7.1                  */
  --grad-brand: linear-gradient(180deg, #2FD39A, #1BAE7B);
  --on-brand:   #04261A;
  --grad-gold:  linear-gradient(180deg, #EFC974, #DFB350);
  --on-gold:    #3A2A05;
  --grad-brand-shadow: 0 6px 18px rgba(27,174,123,.34);
  --grad-gold-shadow:  0 10px 26px rgba(223,179,80,.34);

  /* The shareable "Business Story" card keeps one fixed appearance. */
  --story-grad:  radial-gradient(700px 340px at 84% -10%, #1B6B57 0%, #0B3330 52%, #071F1F 100%);
  --story-ink:   #F1FAF6;
  --story-ink-2: #B7D9CD;
  --story-gold:  #F5CE71;
  --story-line:  rgba(255,255,255,.12);
}

/* ============================================================================
   DARK — the default. Ink-green, warmed a touch so long market days feel
   lamp-lit rather than clinical.
   ==========================================================================*/
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #061B1D;
  --bg-warm:   #081E20;
  --bg-grad:   radial-gradient(1250px 720px at 78% -10%, #12463F 0%, #0A2A2B 44%, #051718 100%);
  --surface:   #0D2A2E;
  --surface-2: #113438;
  --surface-3: #163D42;
  --surface-hover: #1A454B;
  --surface-sunken: #0A2326;

  --ink:   #EFF8F4;
  --ink-2: #C0DBD2;
  --ink-3: #9DBDB3;      /* 5.1:1 worst-case on --surface-hover */
  --ink-inverse: #061B1D;

  --line:   rgba(210,240,228,.11);
  --line-2: rgba(210,240,228,.20);
  --line-3: rgba(210,240,228,.32);

  --scrim:  rgba(2,12,12,.70);
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 8px 28px rgba(0,0,0,.42);
  --shadow-3: 0 20px 60px rgba(0,0,0,.56);
  --glow:     0 0 0 1px rgba(255,255,255,.05), 0 10px 34px rgba(0,0,0,.45);

  /* ---- metric families: fill / ink / tint / edge ------------------------ */
  --m-teal-fill:  #1B8A8A;  --m-teal-ink:  #4CD0CC;
  --m-teal-tint:  rgba(27,138,138,.16);   --m-teal-edge: rgba(69,200,196,.30);

  --m-mint-fill:  #159A6E;  --m-mint-ink:  #55E0AC;
  --m-mint-tint:  rgba(21,154,110,.17);   --m-mint-edge: rgba(85,224,172,.30);

  --m-coral-fill: #E1584F;  --m-coral-ink: #FF9088;
  --m-coral-tint: rgba(225,88,79,.17);    --m-coral-edge: rgba(255,144,136,.32);

  --m-gold-fill:  #C8992F;  --m-gold-ink:  #F5CE71;
  --m-gold-tint:  rgba(200,153,47,.17);   --m-gold-edge: rgba(245,206,113,.32);

  --m-violet-fill:#7C6CE0;  --m-violet-ink:#B4A8FF;
  --m-violet-tint:rgba(124,108,224,.18);  --m-violet-edge: rgba(180,168,255,.32);

  --m-indigo-fill:#4A7BD8;  --m-indigo-ink:#95B8FF;
  --m-indigo-tint:rgba(74,123,216,.18);   --m-indigo-edge: rgba(149,184,255,.32);

  --m-amber-fill: #D9902C;  --m-amber-ink: #F7BC63;
  --m-amber-tint: rgba(217,144,44,.17);   --m-amber-edge: rgba(247,188,99,.32);

  --m-plum-fill:  #B65BA8;  --m-plum-ink:  #EC9BDD;
  --m-plum-tint:  rgba(182,91,168,.17);   --m-plum-edge: rgba(236,155,221,.32);
}

/* ============================================================================
   LIGHT — mint paper. Inks deepened until each clears 4.5:1 on both
   --surface and its own tint.
   ==========================================================================*/
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #EEF5F1;
  --bg-warm:   #F6F4EE;
  --bg-grad:   radial-gradient(1100px 640px at 82% -12%, #E1F1EA 0%, #EEF5F1 48%, #E6EFEA 100%);
  --surface:   #FFFFFF;
  --surface-2: #F2F8F5;
  --surface-3: #E6F1EC;
  --surface-hover: #EAF4EF;
  --surface-sunken:#E3EDE8;

  --ink:   #0B1F1B;
  --ink-2: #2F4F47;
  --ink-3: #4B6B62;
  --ink-inverse: #FFFFFF;

  --line:   rgba(11,31,27,.12);
  --line-2: rgba(11,31,27,.20);
  --line-3: rgba(11,31,27,.32);

  --scrim:  rgba(8,24,20,.44);
  --shadow-1: 0 1px 2px rgba(16,60,48,.08);
  --shadow-2: 0 8px 26px rgba(16,60,48,.12);
  --shadow-3: 0 20px 56px rgba(16,60,48,.18);
  --glow:     0 0 0 1px rgba(16,60,48,.06), 0 10px 30px rgba(16,60,48,.12);

  --m-teal-fill:  #12797A;  --m-teal-ink:  #0B5F60;
  --m-teal-tint:  rgba(18,121,122,.11);   --m-teal-edge: rgba(18,121,122,.26);

  --m-mint-fill:  #12805F;  --m-mint-ink:  #0A6349;
  --m-mint-tint:  rgba(18,128,95,.11);    --m-mint-edge: rgba(18,128,95,.26);

  --m-coral-fill: #CC4238;  --m-coral-ink: #A62C24;
  --m-coral-tint: rgba(204,66,56,.10);    --m-coral-edge: rgba(204,66,56,.26);

  --m-gold-fill:  #A97C1E;  --m-gold-ink:  #78560D;
  --m-gold-tint:  rgba(169,124,30,.13);   --m-gold-edge: rgba(169,124,30,.28);

  --m-violet-fill:#6355C4;  --m-violet-ink:#4A3D9E;
  --m-violet-tint:rgba(99,85,196,.10);    --m-violet-edge: rgba(99,85,196,.26);

  --m-indigo-fill:#2F5FBC;  --m-indigo-ink:#1F4894;
  --m-indigo-tint:rgba(47,95,188,.10);    --m-indigo-edge: rgba(47,95,188,.26);

  --m-amber-fill: #B4741C;  --m-amber-ink: #85520B;
  --m-amber-tint: rgba(180,116,28,.12);   --m-amber-edge: rgba(180,116,28,.28);

  --m-plum-fill:  #9C4290;  --m-plum-ink:  #7A2E70;
  --m-plum-tint:  rgba(156,66,144,.10);   --m-plum-edge: rgba(156,66,144,.26);
}

/* ============================================================================
   SEMANTIC ALIASES — modules speak meaning, not hue.
   ==========================================================================*/
:root {
  --brand:      var(--m-mint-fill);
  --brand-ink:  var(--m-mint-ink);
  --brand-soft: var(--m-mint-tint);
  --brand-edge: var(--m-mint-edge);

  --credit:      var(--m-mint-fill);   /* money in  */
  --credit-ink:  var(--m-mint-ink);
  --credit-soft: var(--m-mint-tint);

  --debit:      var(--m-coral-fill);   /* money out / owed / overdue */
  --debit-ink:  var(--m-coral-ink);
  --debit-soft: var(--m-coral-tint);

  --danger:      var(--m-coral-fill);
  --danger-ink:  var(--m-coral-ink);
  --danger-soft: var(--m-coral-tint);

  --warn:      var(--m-amber-fill);
  --warn-ink:  var(--m-amber-ink);
  --warn-soft: var(--m-amber-tint);

  --gold:      var(--m-gold-fill);     /* WON money only */
  --gold-ink:  var(--m-gold-ink);
  --gold-soft: var(--m-gold-tint);

  --violet:      var(--m-violet-fill);
  --violet-ink:  var(--m-violet-ink);
  --violet-soft: var(--m-violet-tint);

  --trust:      var(--m-indigo-fill);  /* lender / verification surfaces */
  --trust-ink:  var(--m-indigo-ink);
  --trust-soft: var(--m-indigo-tint);

  /* module accents — KPI tints and the colour-blocked nav */
  --acc-today:   var(--m-mint-fill);
  --acc-books:   var(--m-teal-fill);
  --acc-credit:  var(--m-amber-fill);
  --acc-ask:     var(--m-violet-fill);
  --acc-more:    var(--m-indigo-fill);
  --acc-loan:    var(--m-indigo-fill);
  --acc-comply:  var(--m-plum-fill);
  --acc-price:   var(--m-gold-fill);
  --acc-packs:   var(--m-teal-fill);
}

/* ============================================================================
   KPI CARDS — `.kpi` plus a `.m-<family>`.
   ==========================================================================*/
.kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 14px 16px;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.kpi::before { content: ''; position: absolute; inset: 0; background: var(--kpi-tint, transparent); pointer-events: none; }
.kpi::after  { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--kpi-fill, transparent); border-radius: var(--r-2) 0 0 var(--r-2); }
.kpi > * { position: relative; min-width: 0; }
@media (hover:hover) and (pointer:fine){ .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } }
.kpi .kpi-label { color: var(--ink-2); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.kpi .kpi-value { color: var(--kpi-ink, var(--ink)); font-family: var(--font-display); font-size: var(--kpi-size, 26px); line-height: 1.1; overflow-wrap: anywhere; }
.kpi .kpi-foot  { color: var(--ink-3); font-size: 12px; }

.m-teal   { --kpi-tint: var(--m-teal-tint);   --kpi-ink: var(--m-teal-ink);   --kpi-fill: var(--m-teal-fill); }
.m-mint   { --kpi-tint: var(--m-mint-tint);   --kpi-ink: var(--m-mint-ink);   --kpi-fill: var(--m-mint-fill); }
.m-coral  { --kpi-tint: var(--m-coral-tint);  --kpi-ink: var(--m-coral-ink);  --kpi-fill: var(--m-coral-fill); }
.m-gold   { --kpi-tint: var(--m-gold-tint);   --kpi-ink: var(--m-gold-ink);   --kpi-fill: var(--m-gold-fill); }
.m-violet { --kpi-tint: var(--m-violet-tint); --kpi-ink: var(--m-violet-ink); --kpi-fill: var(--m-violet-fill); }
.m-indigo { --kpi-tint: var(--m-indigo-tint); --kpi-ink: var(--m-indigo-ink); --kpi-fill: var(--m-indigo-fill); }
.m-amber  { --kpi-tint: var(--m-amber-tint);  --kpi-ink: var(--m-amber-ink);  --kpi-fill: var(--m-amber-fill); }
.m-plum   { --kpi-tint: var(--m-plum-tint);   --kpi-ink: var(--m-plum-ink);   --kpi-fill: var(--m-plum-fill); }

.fill { background: var(--fill-bg, var(--brand)); color: var(--on-fill); border: 0; }
.fill.m-teal{--fill-bg:var(--m-teal-fill)}   .fill.m-mint{--fill-bg:var(--m-mint-fill)}
.fill.m-coral{--fill-bg:var(--m-coral-fill)} .fill.m-gold{--fill-bg:var(--m-gold-fill)}
.fill.m-violet{--fill-bg:var(--m-violet-fill)} .fill.m-indigo{--fill-bg:var(--m-indigo-fill)}
.fill.m-amber{--fill-bg:var(--m-amber-fill)} .fill.m-plum{--fill-bg:var(--m-plum-fill)}

.tintchip {
  background: var(--kpi-tint, var(--brand-soft));
  color: var(--kpi-ink, var(--brand-ink));
  border: 1px solid var(--kpi-edge, var(--line));
  border-radius: var(--r-pill); padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.m-teal  { --kpi-edge: var(--m-teal-edge); }   .m-mint  { --kpi-edge: var(--m-mint-edge); }
.m-coral { --kpi-edge: var(--m-coral-edge); }  .m-gold  { --kpi-edge: var(--m-gold-edge); }
.m-violet{ --kpi-edge: var(--m-violet-edge); } .m-indigo{ --kpi-edge: var(--m-indigo-edge); }
.m-amber { --kpi-edge: var(--m-amber-edge); }  .m-plum  { --kpi-edge: var(--m-plum-edge); }

/* ============================================================================
   COLOUR-BLOCKED NAV
   ==========================================================================*/
.navblock { position: relative; padding-left: 12px; }
.navblock::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: var(--r-pill); background: var(--nav-accent, var(--brand));
  opacity: .55; transition: opacity var(--t-base) var(--ease), width var(--t-base) var(--ease);
}
.navblock:hover::before, .navblock.is-active::before { opacity: 1; width: 4px; }
.navblock.is-active { background: var(--nav-tint, var(--brand-soft)); border-radius: 0 var(--r-1) var(--r-1) 0; }
.navblock.is-active .nav-label { color: var(--nav-ink, var(--brand-ink)); font-weight: 600; }

.nav-g1 { --nav-accent: var(--m-mint-fill);   --nav-tint: var(--m-mint-tint);   --nav-ink: var(--m-mint-ink); }
.nav-g2 { --nav-accent: var(--m-teal-fill);   --nav-tint: var(--m-teal-tint);   --nav-ink: var(--m-teal-ink); }
.nav-g3 { --nav-accent: var(--m-amber-fill);  --nav-tint: var(--m-amber-tint);  --nav-ink: var(--m-amber-ink); }
.nav-g4 { --nav-accent: var(--m-violet-fill); --nav-tint: var(--m-violet-tint); --nav-ink: var(--m-violet-ink); }
.nav-g5 { --nav-accent: var(--m-indigo-fill); --nav-tint: var(--m-indigo-tint); --nav-ink: var(--m-indigo-ink); }
.nav-g6 { --nav-accent: var(--m-plum-fill);   --nav-tint: var(--m-plum-tint);   --nav-ink: var(--m-plum-ink); }