/* ==========================================================================
   ProfitLeak by HighScalers — Design Tokens v1.0
   HighScalers, a brand of Dawaris Technologies LLC
   Base: HighScalers navy #0B1D3A · green #12A150 · gold #F5B83D
   ========================================================================== */

@font-face{font-family:"Plus Jakarta Sans";src:url("/fonts/Jakarta.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* ---------- Brand ---------- */
  --pl-brand-navy:#0B1D3A;
  --pl-brand-green:#12A150;
  --pl-brand-gold:#F5B83D;

  /* ---------- Navy (ink / surfaces in dark mode) ---------- */
  --pl-navy-950:#060F20; --pl-navy-900:#0B1D3A; --pl-navy-800:#12284C; --pl-navy-700:#1B3760;
  --pl-navy-600:#284A7A; --pl-navy-500:#3A6298; --pl-navy-300:#8EA6C8; --pl-navy-100:#DCE5F2; --pl-navy-50:#EFF3F9;

  /* ---------- Neutral (cool slate, navy-tinted) ---------- */
  --pl-gray-0:#FFFFFF;  --pl-gray-25:#FBFCFD; --pl-gray-50:#F6F8FB; --pl-gray-100:#EEF1F6;
  --pl-gray-200:#E3E8EF; --pl-gray-300:#CDD5E0; --pl-gray-400:#9AA6B8; --pl-gray-500:#66738A;
  --pl-gray-600:#4F5B71; --pl-gray-700:#374257; --pl-gray-800:#222B3C; --pl-gray-900:#131A28;

  /* ---------- Profit (success) — HighScalers green ---------- */
  --pl-profit-50:#EBF8F0; --pl-profit-100:#D3F0DF; --pl-profit-200:#A7E0BE; --pl-profit-300:#6ECB95;
  --pl-profit-400:#35B46E; --pl-profit-500:#12A150; --pl-profit-600:#0D8743; --pl-profit-700:#0B6C37; --pl-profit-800:#0A552D;

  /* ---------- Leak (loss / critical) — refined ember red ---------- */
  --pl-leak-50:#FFF4F2; --pl-leak-100:#FFE4DF; --pl-leak-200:#FFC8BF; --pl-leak-300:#F99D90;
  --pl-leak-400:#EE6B5C; --pl-leak-500:#DC3D32; --pl-leak-600:#BF2C26; --pl-leak-700:#9A2321; --pl-leak-800:#761D1D;

  /* ---------- Gold (watch / premium highlight) ---------- */
  --pl-gold-50:#FEF8EA; --pl-gold-100:#FDEDC8; --pl-gold-200:#FBDB93; --pl-gold-300:#F8C95F;
  --pl-gold-500:#F5B83D; --pl-gold-600:#D99A1A; --pl-gold-700:#946A10; --pl-gold-800:#7A540C;

  /* ---------- Semantic ---------- */
  --pl-bg:var(--pl-gray-50);
  --pl-surface:var(--pl-gray-0);
  --pl-surface-sunken:var(--pl-gray-100);
  --pl-border:var(--pl-gray-200);
  --pl-border-strong:var(--pl-gray-300);
  --pl-text:var(--pl-navy-900);
  --pl-text-secondary:var(--pl-gray-600);
  --pl-text-tertiary:var(--pl-gray-500);
  --pl-text-inverse:#FFFFFF;
  --pl-positive:var(--pl-profit-600);  /* text-safe green on white (4.6:1) */
  --pl-negative:var(--pl-leak-600);    /* text-safe red on white (5.6:1) */
  --pl-watch:var(--pl-gold-700);       /* text-safe amber on white (4.7:1) */
  --pl-focus:0 0 0 3px rgba(18,161,80,.28);

  /* ---------- Chart palette (in this order) ---------- */
  --pl-chart-1:#0B1D3A; /* revenue          */
  --pl-chart-2:#12A150; /* true profit      */
  --pl-chart-3:#DC3D32; /* leaks / loss     */
  --pl-chart-4:#F5B83D; /* watch / target   */
  --pl-chart-5:#3A6298; /* costs            */
  --pl-chart-6:#9AA6B8; /* baseline / other */
  --pl-chart-grid:#E3E8EF;
  --pl-chart-axis:#66738A;

  /* ---------- Typography ---------- */
  --pl-font-display:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pl-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pl-font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --pl-num:"tnum" 1,"cv11" 1;           /* tabular figures for every money value */

  /* size / line-height / tracking */
  --pl-text-display:64px; --pl-lh-display:68px; --pl-tr-display:-0.035em;
  --pl-text-h1:44px;      --pl-lh-h1:50px;      --pl-tr-h1:-0.03em;
  --pl-text-h2:32px;      --pl-lh-h2:38px;      --pl-tr-h2:-0.025em;
  --pl-text-h3:22px;      --pl-lh-h3:28px;      --pl-tr-h3:-0.015em;
  --pl-text-h4:17px;      --pl-lh-h4:24px;      --pl-tr-h4:-0.01em;
  --pl-text-lg:17px;      --pl-lh-lg:28px;
  --pl-text-base:15px;    --pl-lh-base:24px;
  --pl-text-sm:13px;      --pl-lh-sm:20px;
  --pl-text-xs:12px;      --pl-lh-xs:16px;
  --pl-text-overline:11px;--pl-tr-overline:0.12em;
  --pl-text-kpi:36px;     --pl-lh-kpi:40px;     --pl-tr-kpi:-0.03em;

  /* ---------- Spacing (4px grid) ---------- */
  --pl-space-0:0; --pl-space-0_5:2px; --pl-space-1:4px; --pl-space-1_5:6px; --pl-space-2:8px; --pl-space-3:12px;
  --pl-space-4:16px; --pl-space-5:20px; --pl-space-6:24px; --pl-space-8:32px; --pl-space-10:40px;
  --pl-space-12:48px; --pl-space-16:64px; --pl-space-20:80px; --pl-space-24:96px;

  /* ---------- Radii ---------- */
  --pl-radius-xs:4px; --pl-radius-sm:6px; --pl-radius-md:8px; --pl-radius-lg:12px;
  --pl-radius-xl:16px; --pl-radius-2xl:24px; --pl-radius-full:999px;

  /* ---------- Elevation (navy-tinted, layered) ---------- */
  --pl-shadow-xs:0 1px 2px rgba(11,29,58,.05);
  --pl-shadow-sm:0 0 0 1px rgba(11,29,58,.05),0 1px 2px rgba(11,29,58,.05),0 2px 4px -2px rgba(11,29,58,.06);
  --pl-shadow-md:0 0 0 1px rgba(11,29,58,.05),0 2px 4px -1px rgba(11,29,58,.05),0 8px 20px -6px rgba(11,29,58,.10);
  --pl-shadow-lg:0 0 0 1px rgba(11,29,58,.05),0 12px 24px -8px rgba(11,29,58,.12),0 32px 64px -16px rgba(11,29,58,.18);
  --pl-shadow-inset:inset 0 1px 0 rgba(255,255,255,.12);

  /* ---------- Motion ---------- */
  --pl-ease:cubic-bezier(.2,.8,.2,1); --pl-dur-fast:120ms; --pl-dur:200ms; --pl-dur-slow:360ms;

  /* ---------- Layout ---------- */
  --pl-container:1200px; --pl-sidebar:248px; --pl-control-h-sm:32px; --pl-control-h:40px; --pl-control-h-lg:48px;
}

/* ==========================================================================
   Base
   ========================================================================== */
.pl, .pl *{box-sizing:border-box}
.pl{font-family:var(--pl-font-body);font-size:var(--pl-text-base);line-height:var(--pl-lh-base);color:var(--pl-text);
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11" 1}
.pl-display{font:700 var(--pl-text-display)/var(--pl-lh-display) var(--pl-font-display);letter-spacing:var(--pl-tr-display)}
.pl-h1{font:700 var(--pl-text-h1)/var(--pl-lh-h1) var(--pl-font-display);letter-spacing:var(--pl-tr-h1)}
.pl-h2{font:700 var(--pl-text-h2)/var(--pl-lh-h2) var(--pl-font-display);letter-spacing:var(--pl-tr-h2)}
.pl-h3{font:650 var(--pl-text-h3)/var(--pl-lh-h3) var(--pl-font-display);letter-spacing:var(--pl-tr-h3)}
.pl-h4{font:650 var(--pl-text-h4)/var(--pl-lh-h4) var(--pl-font-display);letter-spacing:var(--pl-tr-h4)}
.pl-lead{font-size:var(--pl-text-lg);line-height:var(--pl-lh-lg);color:var(--pl-text-secondary)}
.pl-sm{font-size:var(--pl-text-sm);line-height:var(--pl-lh-sm)}
.pl-xs{font-size:var(--pl-text-xs);line-height:var(--pl-lh-xs)}
.pl-overline{font:600 var(--pl-text-overline)/16px var(--pl-font-body);letter-spacing:var(--pl-tr-overline);text-transform:uppercase;color:var(--pl-text-tertiary)}
.pl-num{font-feature-settings:var(--pl-num);font-variant-numeric:tabular-nums}
.pl-money{font:650 var(--pl-text-kpi)/var(--pl-lh-kpi) var(--pl-font-body);letter-spacing:var(--pl-tr-kpi);font-feature-settings:var(--pl-num)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.pl-btn{--h:var(--pl-control-h);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 16px;
  border-radius:var(--pl-radius-md);border:1px solid transparent;font:560 14px/1 var(--pl-font-body);letter-spacing:-0.005em;
  cursor:pointer;white-space:nowrap;transition:background var(--pl-dur-fast) var(--pl-ease),box-shadow var(--pl-dur-fast) var(--pl-ease),transform var(--pl-dur-fast)}
.pl-btn:focus-visible{outline:none;box-shadow:var(--pl-focus)}
.pl-btn:active{transform:translateY(.5px)}
.pl-btn--sm{--h:var(--pl-control-h-sm);padding:0 12px;font-size:13px;border-radius:var(--pl-radius-sm)}
.pl-btn--lg{--h:var(--pl-control-h-lg);padding:0 22px;font-size:15px;border-radius:10px}
.pl-btn--primary{background:linear-gradient(180deg,#16305A 0%,var(--pl-navy-900) 100%);color:#fff;
  box-shadow:var(--pl-shadow-inset),0 0 0 1px var(--pl-navy-900),0 1px 2px rgba(11,29,58,.24),0 4px 10px -4px rgba(11,29,58,.4)}
.pl-btn--primary:hover{background:linear-gradient(180deg,#1C3A69 0%,#102649 100%)}
.pl-btn--accent{background:linear-gradient(180deg,#17AE59 0%,var(--pl-profit-500) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px var(--pl-profit-600),0 1px 2px rgba(13,135,67,.25),0 4px 10px -4px rgba(13,135,67,.45)}
.pl-btn--accent:hover{background:linear-gradient(180deg,#1AB962 0%,#109548 100%)}
.pl-btn--secondary{background:var(--pl-surface);color:var(--pl-text);border-color:var(--pl-border);box-shadow:var(--pl-shadow-xs)}
.pl-btn--secondary:hover{background:var(--pl-gray-50);border-color:var(--pl-border-strong)}
.pl-btn--ghost{background:transparent;color:var(--pl-text-secondary)}
.pl-btn--ghost:hover{background:var(--pl-gray-100);color:var(--pl-text)}
.pl-btn--danger{background:var(--pl-leak-50);color:var(--pl-leak-700);border-color:var(--pl-leak-200)}
.pl-btn--danger:hover{background:var(--pl-leak-100)}
.pl-btn[disabled]{opacity:.45;pointer-events:none}

/* ==========================================================================
   Inputs
   ========================================================================== */
.pl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-label{font:550 13px/18px var(--pl-font-body);color:var(--pl-text)}
.pl-hint{font-size:12px;line-height:16px;color:var(--pl-text-tertiary)}
.pl-input{display:flex;align-items:center;gap:8px;height:var(--pl-control-h);padding:0 12px;background:var(--pl-surface);
  border:1px solid var(--pl-border-strong);border-radius:var(--pl-radius-md);box-shadow:var(--pl-shadow-xs);
  transition:border-color var(--pl-dur-fast),box-shadow var(--pl-dur-fast)}
.pl-input input,.pl-input select{all:unset;flex:1;min-width:0;width:100%;font:450 14px/20px var(--pl-font-body);color:var(--pl-text);font-feature-settings:var(--pl-num)}
.pl-input input::placeholder{color:var(--pl-gray-400)}
.pl-input__affix{font:500 14px/20px var(--pl-font-body);color:var(--pl-text-tertiary)}
.pl-input:hover{border-color:var(--pl-gray-400)}
.pl-input.is-focus,.pl-input:focus-within{border-color:var(--pl-profit-500);box-shadow:var(--pl-focus)}
.pl-input.is-error{border-color:var(--pl-leak-400);box-shadow:0 0 0 3px rgba(220,61,50,.14)}
.pl-hint.is-error{color:var(--pl-leak-600)}

/* ==========================================================================
   Cards, badges, KPI tiles
   ========================================================================== */
.pl-card{background:var(--pl-surface);border-radius:var(--pl-radius-xl);box-shadow:var(--pl-shadow-sm);padding:var(--pl-space-6)}
.pl-card--raised{box-shadow:var(--pl-shadow-md)}
.pl-card__title{font:650 15px/22px var(--pl-font-display);letter-spacing:-0.01em}
.pl-card__meta{font-size:13px;color:var(--pl-text-tertiary)}

.pl-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--pl-radius-full);
  font:560 12px/1 var(--pl-font-body);font-feature-settings:var(--pl-num);white-space:nowrap}
.pl-badge--profit{background:var(--pl-profit-50);color:var(--pl-profit-700);box-shadow:inset 0 0 0 1px rgba(18,161,80,.18)}
.pl-badge--leak{background:var(--pl-leak-50);color:var(--pl-leak-700);box-shadow:inset 0 0 0 1px rgba(220,61,50,.18)}
.pl-badge--watch{background:var(--pl-gold-50);color:var(--pl-gold-800);box-shadow:inset 0 0 0 1px rgba(217,154,26,.25)}
.pl-badge--neutral{background:var(--pl-gray-100);color:var(--pl-gray-700);box-shadow:inset 0 0 0 1px rgba(11,29,58,.06)}

.pl-kpi{background:var(--pl-surface);border-radius:var(--pl-radius-xl);box-shadow:var(--pl-shadow-sm);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.pl-kpi__label{font:550 13px/18px var(--pl-font-body);color:var(--pl-text-secondary);display:flex;align-items:center;justify-content:space-between}
.pl-kpi__value{font:650 32px/36px var(--pl-font-body);letter-spacing:-0.03em;font-feature-settings:var(--pl-num);color:var(--pl-text)}
.pl-kpi__value small{font-size:.56em;letter-spacing:-0.01em;color:var(--pl-text-tertiary);font-weight:550;margin-left:2px}
.pl-kpi__foot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--pl-text-tertiary)}
.pl-kpi--leak .pl-kpi__value{color:var(--pl-leak-600)}

/* ==========================================================================
   Leak alert
   ========================================================================== */
.pl-leak{position:relative;display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:start;padding:16px 18px;
  background:var(--pl-surface);border-radius:var(--pl-radius-lg);box-shadow:var(--pl-shadow-sm)}
.pl-leak__icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--pl-leak-50);box-shadow:inset 0 0 0 1px rgba(220,61,50,.16)}
.pl-leak__icon svg{width:16px;height:16px}
.pl-leak__title{font:600 14px/20px var(--pl-font-body);color:var(--pl-text);letter-spacing:-0.005em}
.pl-leak__body{font-size:13px;line-height:19px;color:var(--pl-text-secondary);margin-top:2px}
.pl-leak__amount{text-align:right;font:650 18px/22px var(--pl-font-body);letter-spacing:-0.02em;color:var(--pl-leak-600);font-feature-settings:var(--pl-num)}
.pl-leak__per{display:block;font:500 11.5px/16px var(--pl-font-body);letter-spacing:0;color:var(--pl-text-tertiary);margin-top:2px}
.pl-leak__meter{grid-column:2 / 4;height:4px;border-radius:4px;background:var(--pl-gray-100);overflow:hidden;margin-top:4px}
.pl-leak__meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pl-leak-400),var(--pl-leak-600))}
.pl-leak--watch .pl-leak__icon{background:var(--pl-gold-50);box-shadow:inset 0 0 0 1px rgba(217,154,26,.25)}
.pl-leak--watch .pl-leak__amount{color:var(--pl-gold-700)}
.pl-leak--watch .pl-leak__meter i{background:linear-gradient(90deg,var(--pl-gold-300),var(--pl-gold-600))}
.pl-leak--plugged .pl-leak__icon{background:var(--pl-profit-50);box-shadow:inset 0 0 0 1px rgba(18,161,80,.18)}
.pl-leak--plugged .pl-leak__amount{color:var(--pl-profit-600)}
.pl-leak--plugged .pl-leak__meter i{background:linear-gradient(90deg,var(--pl-profit-300),var(--pl-profit-600))}

/* ==========================================================================
   Example-data marker (required on every mockup / demo with fake numbers)
   ========================================================================== */
.pl-example{display:inline-flex;align-items:center;gap:6px;font:550 11px/1 var(--pl-font-body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pl-gray-500);padding:5px 8px;border-radius:var(--pl-radius-full);background:var(--pl-gray-100)}