/* WageBench — Friendly green, B2C consumer + B2B credible.
   Figtree single-family sans · JetBrains Mono for figures. */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* Ink — cool charcoal */
  --ink-950: oklch(0.18 0.014 230);
  --ink-900: oklch(0.24 0.016 230);
  --ink-800: oklch(0.32 0.016 230);
  --ink-700: oklch(0.42 0.014 230);
  --ink-600: oklch(0.55 0.012 230);
  --ink-500: oklch(0.66 0.010 230);
  --ink-400: oklch(0.76 0.008 230);
  --ink-300: oklch(0.85 0.006 230);
  --ink-200: oklch(0.91 0.005 230);
  --ink-100: oklch(0.965 0.003 230);
  --ink-50:  oklch(0.985 0.002 230);

  /* Surface — pale-mint wash */
  --surface:   oklch(0.995 0.003 140);
  --surface-2: oklch(0.975 0.008 140);
  --surface-3: oklch(0.95 0.012 140);

  /* Meadow — primary green (warmer than trust-green, yellower than teal) */
  --meadow-950: oklch(0.22 0.06 140);
  --meadow-800: oklch(0.36 0.10 140);
  --meadow-700: oklch(0.46 0.13 140);
  --meadow-600: oklch(0.56 0.14 140);
  --meadow-500: oklch(0.66 0.14 140);   /* primary brand */
  --meadow-400: oklch(0.76 0.12 140);
  --meadow-300: oklch(0.84 0.10 140);
  --meadow-200: oklch(0.90 0.06 140);
  --meadow-100: oklch(0.94 0.04 140);
  --meadow-50:  oklch(0.97 0.02 140);

  /* Sunset — secondary accent for "your number" highlights */
  --sunset-700: oklch(0.55 0.16 55);
  --sunset-500: oklch(0.72 0.15 55);
  --sunset-300: oklch(0.84 0.09 55);
  --sunset-100: oklch(0.95 0.04 55);

  /* Percentile palette — 5-step distribution colour scale */
  --p10: oklch(0.84 0.08 230);
  --p25: oklch(0.80 0.10 170);
  --p50: oklch(0.66 0.14 140);
  --p75: oklch(0.74 0.14 80);
  --p90: oklch(0.72 0.15 55);

  /* Semantic */
  --pos:      oklch(0.55 0.14 140);
  --pos-soft: oklch(0.95 0.035 140);
  --neg:      oklch(0.55 0.18 25);
  --neg-soft: oklch(0.96 0.04 25);

  /* Type */
  --sans: "Figtree", "Söhne", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Radius — generous (consumer audience) */
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-full: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px oklch(0.18 0.014 230 / 0.04), 0 4px 14px -4px oklch(0.18 0.014 230 / 0.06);
  --shadow-pop:  0 2px 6px oklch(0.18 0.014 230 / 0.06), 0 18px 36px -10px oklch(0.18 0.014 230 / 0.10);
}

.wb-root {
  font-family: var(--sans);
  color: var(--ink-950);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wb-root .num, .wb-root .mono {
  font-family: var(--mono);
  font-feature-settings: "tnum", "zero";
  font-variant-numeric: tabular-nums slashed-zero;
}

.wb-root .micro {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--meadow-700);
}

/* Pill */
.wb-root .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-full);
  background: var(--ink-100);
  color: var(--ink-700);
}
.wb-root .pill.meadow { background: var(--meadow-100); color: var(--meadow-800); }
.wb-root .pill.sunset { background: var(--sunset-100); color: var(--sunset-700); }
.wb-root .pill.pos    { background: var(--pos-soft);   color: var(--pos); }
.wb-root .pill.neg    { background: var(--neg-soft);   color: var(--neg); }

/* Audience switch — the two-sided tell */
.wb-root .switch {
  display: inline-flex;
  padding: 4px;
  background: var(--ink-100);
  border-radius: var(--r-full);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
}
.wb-root .switch span {
  padding: 6px 14px;
  border-radius: var(--r-full);
  color: var(--ink-700);
  cursor: pointer;
}
.wb-root .switch span.on { background: var(--ink-950); color: var(--surface); }

/* Buttons */
.wb-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-8);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s;
  white-space: nowrap;
}
.wb-root .btn-primary { background: var(--meadow-600); color: white; }
.wb-root .btn-ghost   { background: var(--surface); color: var(--ink-900); border-color: var(--ink-300); }
.wb-root .btn-dark    { background: var(--ink-950); color: var(--surface); }

/* Input */
.wb-root .input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  font-family: var(--sans); font-size: 14px;
  color: var(--ink-700);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-8);
  box-shadow: var(--shadow-card);
}

/* Card */
.wb-root .card {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-12);
  box-shadow: var(--shadow-card);
}

/* Mint wash */
.wb-mint {
  background:
    radial-gradient(ellipse at top left, oklch(0.95 0.04 140 / 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at top right, oklch(0.96 0.04 55 / 0.4) 0%, transparent 55%),
    var(--surface);
}

/* Hairline rule */
.wb-rule { border: 0; border-top: 1px solid var(--ink-200); margin: 0; }