/* ============================================================
   AffiWave - Design Tokens
   Affiliate & partner marketing SaaS - affiwave.com
   ============================================================ */

/* Fonty self-hosted (woff2 w /static/fonts/). Bez zewnetrznego Google Fonts - patrz static/css/fonts.css. */
@import url('/static/css/fonts.css');

:root {
  /* ---------- Brand fonts ---------- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Neutral / slate scale ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFD;
  --n-50:  #F4F6FA;
  --n-100: #EAEEF4;
  --n-200: #DCE2EC;
  --n-300: #C3CCDA;
  --n-400: #97A3B6;
  --n-500: #6B7888;
  --n-600: #4C5868;
  --n-700: #333E4E;
  --n-800: #1E2836;
  --n-900: #0E1724;

  /* ---------- Ink (deep navy surfaces) ---------- */
  --ink-900: #0A1020;
  --ink-800: #0F1828;
  --ink-700: #16223A;
  --ink-600: #1F3050;

  /* ---------- Brand: revenue jade-teal ---------- */
  --brand-50:  #E5F7F1;
  --brand-100: #C4EFE0;
  --brand-200: #95E3C9;
  --brand-300: #5FD3AE;
  --brand-400: #25BB90;
  --brand-500: #0EA37A;   /* primary */
  --brand-600: #0B8765;
  --brand-700: #096C52;
  --brand-800: #08553F;

  /* ---------- Tech accent: electric blue ---------- */
  --blue-50:  #ECF1FF;
  --blue-100: #D6E1FF;
  --blue-300: #8FAcFF;
  --blue-400: #5B8BFF;
  --blue-500: #3B6FF6;
  --blue-600: #2A57D6;
  --blue-700: #1F43AC;

  /* ---------- Highlight mint (charts/glow) ---------- */
  --mint: #34E3B0;
  --violet: #8B6CF6;
  --violet-600: #6F4FE0;

  /* ---------- Status ---------- */
  --success:   #12A150;
  --success-bg:#E6F6EC;
  --warning:   #DE911D;   /* pending payouts */
  --warning-bg:#FBF1DC;
  --danger:    #E5484D;   /* fraud / risk */
  --danger-bg: #FCE9EA;
  --info:      #3B6FF6;
  --info-bg:   #ECF1FF;
  --review:    #8B6CF6;   /* under review */
  --review-bg: #F0EBFE;

  /* ---------- Semantic surfaces ---------- */
  --bg-page:    #F6F8FB;
  --bg-surface: #FFFFFF;
  --bg-subtle:  #F4F6FA;
  --bg-inset:   #EFF2F7;
  --bg-ink:     var(--ink-900);

  /* ---------- Text ---------- */
  --text-strong: #0E1724;
  --text:        #28303C;
  --text-muted:  #5B6675;
  --text-subtle: #8A94A3;
  --text-onbrand:#FFFFFF;
  --text-onink:  #E7ECF4;
  --text-oninkmuted: #9AA7BC;

  /* ---------- Borders ---------- */
  --border:        #E4E9F0;
  --border-strong: #D2DAE5;
  --border-ink:    #213149;
  --ring: 0 0 0 3px rgba(14,163,122,0.22);
  --ring-blue: 0 0 0 3px rgba(59,111,246,0.22);

  /* ---------- Chart palette ---------- */
  --chart-1: #0EA37A;  /* jade  */
  --chart-2: #3B6FF6;  /* blue  */
  --chart-3: #DE911D;  /* amber */
  --chart-4: #8B6CF6;  /* violet*/
  --chart-5: #34E3B0;  /* mint  */
  --chart-6: #E5484D;  /* red   */
  --chart-grid: #EAEEF4;

  /* ---------- Radii ---------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---------- Spacing (4pt base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 112px;

  /* ---------- Shadows ---------- */
  --sh-xs: 0 1px 2px rgba(13,26,48,0.06);
  --sh-sm: 0 1px 2px rgba(13,26,48,0.06), 0 2px 6px rgba(13,26,48,0.05);
  --sh-md: 0 2px 4px rgba(13,26,48,0.05), 0 8px 20px rgba(13,26,48,0.08);
  --sh-lg: 0 8px 24px rgba(13,26,48,0.10), 0 24px 48px rgba(13,26,48,0.10);
  --sh-xl: 0 24px 60px rgba(10,16,32,0.22);
  --sh-brand: 0 8px 24px rgba(14,163,122,0.28);
  --sh-glow: 0 0 0 1px rgba(52,227,176,0.20), 0 8px 40px rgba(14,163,122,0.18);

  /* ---------- Type scale ---------- */
  --t-display: clamp(2.6rem, 1.6rem + 3.4vw, 4.25rem);
  --t-h1: clamp(2.1rem, 1.5rem + 2.1vw, 3.1rem);
  --t-h2: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem);
  --t-h3: 1.5rem;
  --t-h4: 1.25rem;
  --t-lg: 1.125rem;
  --t-base: 1rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-2xs: 0.6875rem;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1340px;
  --sidebar-w: 256px;
  --topbar-h: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: var(--brand-200); color: var(--ink-900); }

/* Numbers / financial data - tabular, lined */
.num, .tabular, td.num, .metric-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.mono { font-family: var(--font-mono); font-variant-ligatures: none; }

/* Utility */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-6); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--s-6); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}