/* ============================================================
   Wise-Inspired Design System — Foundations
   Swap --brand-primary and --brand-primary-fg to retarget the
   whole system to a client's accent color.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----------------------------------------------------------
     BRAND — the one set of vars clients override
     ---------------------------------------------------------- */
  --brand-primary: #9FE870;          /* Wise lime green */
  --brand-primary-fg: #163300;       /* Text/icons on brand */
  --brand-primary-hover: #8FD862;
  --brand-primary-press: #7FC853;
  --brand-primary-soft: #E8F7DC;     /* 10% tint on cream */

  /* Supporting brand — these generally don't change per client */
  --brand-ink: #0E0F0C;              /* Near-black ink for display */
  --brand-forest: #163300;           /* Deep forest, paired with lime */

  /* ----------------------------------------------------------
     NEUTRALS — warm ramp (not cool gray)
     ---------------------------------------------------------- */
  --cream-0: #FFFFFF;
  --cream-50: #FBFAF6;               /* app canvas */
  --cream-100: #F4F2EA;              /* hover on light, subtle fills */
  --cream-200: #E8E6DF;              /* hairline borders */
  --cream-300: #D4D1C7;
  --cream-400: #A8A59A;
  --cream-500: #6E6B62;              /* secondary text */
  --cream-600: #4A4842;
  --cream-700: #2E2D29;
  --cream-800: #1A1917;
  --cream-900: #0E0F0C;              /* primary text */

  /* ----------------------------------------------------------
     SEMANTIC
     ---------------------------------------------------------- */
  --success: #2E7D32;
  --success-soft: #E8F5E9;
  --error: #D64545;                  /* muted coral, not fire-engine */
  --error-soft: #FCEBEB;
  --warning: #E8A33D;
  --warning-soft: #FDF3E2;
  --info: #3D7FB8;
  --info-soft: #E6F0F8;

  /* ----------------------------------------------------------
     DATA-VIZ — brand + 3 accents (never all rainbow)
     ---------------------------------------------------------- */
  --viz-1: var(--brand-primary);
  --viz-2: #FF8A65;                  /* coral */
  --viz-3: #F4C430;                  /* amber */
  --viz-4: #5B6BC0;                  /* indigo */
  --viz-5: #163300;                  /* forest */

  /* ----------------------------------------------------------
     SEMANTIC CSS VARS — foreground, background, border
     ---------------------------------------------------------- */
  --fg-1: var(--cream-900);          /* primary text */
  --fg-2: var(--cream-500);          /* secondary text */
  --fg-3: var(--cream-400);          /* tertiary / disabled */
  --fg-on-brand: var(--brand-primary-fg);
  --fg-on-dark: var(--cream-50);

  --bg-canvas: var(--cream-50);      /* page background */
  --bg-surface: var(--cream-0);      /* card background */
  --bg-subtle: var(--cream-100);     /* subtle fill / hover */
  --bg-brand: var(--brand-primary);
  --bg-ink: var(--brand-ink);

  --border-subtle: var(--cream-200);
  --border-strong: var(--cream-300);
  --border-focus: var(--brand-primary);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — display is generous, body is calm */
  --fs-display-2xl: 120px;           /* marketing hero */
  --fs-display-xl: 88px;
  --fs-display-lg: 64px;
  --fs-display-md: 48px;
  --fs-display-sm: 36px;

  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;

  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 700;

  --lh-tight: 1.05;                  /* display / balances */
  --lh-snug: 1.2;                    /* headings */
  --lh-normal: 1.5;                  /* body prose */

  --tracking-display: -0.02em;       /* slight negative on display */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;           /* for eyebrow labels */

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --radius-xs: 4px;                  /* checkbox */
  --radius-sm: 6px;                  /* tags */
  --radius-md: 12px;                 /* buttons, inputs */
  --radius-lg: 16px;                 /* cards */
  --radius-xl: 24px;                 /* feature cards */
  --radius-2xl: 32px;                /* hero panels */
  --radius-pill: 999px;              /* chips only */

  /* ----------------------------------------------------------
     SHADOWS — minimal, one elevation
     ---------------------------------------------------------- */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(14, 15, 12, 0.04);
  --shadow-md: 0 1px 2px rgba(14, 15, 12, 0.04), 0 8px 24px rgba(14, 15, 12, 0.06);
  --shadow-lg: 0 4px 8px rgba(14, 15, 12, 0.06), 0 16px 40px rgba(14, 15, 12, 0.08);
  --shadow-focus: 0 0 0 4px rgba(159, 232, 112, 0.32);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container-marketing: 1200px;
  --container-app: 1440px;
  --container-prose: 680px;
}

/* ============================================================
   SEMANTIC TAGS — default look of raw HTML
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4) 0;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-normal); }

p {
  margin: 0 0 var(--space-4) 0;
  max-width: var(--container-prose);
}

small { font-size: var(--fs-body-sm); color: var(--fg-2); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--cream-300);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: var(--fg-1); }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

/* ============================================================
   UTILITY TYPE CLASSES
   ============================================================ */

.display-2xl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.display-xl  { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.display-lg  { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-lg);  line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.display-md  { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-md);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-display); }
.display-sm  { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-sm);  line-height: var(--lh-snug);  letter-spacing: var(--tracking-display); }

.balance { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display-md); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-2);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   FOCUS — visible, brand-colored
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}