/* ==========================================================================
   Design tokens — based on DESIGN.md (Wise style reference)
   ========================================================================== */
:root {
  /* Colors */
  --color-forest-ink: #163300;
  --color-lime-voltage: #9fe870;
  --color-lime-hover: #8ad65b;
  --color-spruce: #054d28;
  --color-linen-mist: #e2f6d5;
  --color-signal-blue: #0b4c72;
  --color-alarm-red: #cb272f;
  --color-charcoal: #454745;
  --color-obsidian: #0e0f0c;
  --color-pebble: #868685;
  --color-slate: #6a6c6a;
  --color-fog: #e8ebe6;
  --color-paper: #ffffff;

  /* Typography — families */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Wise Sans substitute: Inter Black 900 with tight tracking */
  --font-display: var(--font-inter);

  /* Typography — scale */
  --text-micro: 12px;
  --text-caption: 14px;
  --text-body-sm: 16px;
  --text-body: 18px;
  --text-body-lg: 25px;
  --text-subheading: 36px;
  --text-heading-sm: 45px;
  --text-heading: 61px;
  --text-heading-lg: 89px;
  --text-display: 105px;

  /* Fluid display sizes (mobile → desktop) */
  --fs-display: clamp(44px, 9.4vw, 105px);
  --fs-heading-lg: clamp(40px, 7.2vw, 89px);
  --fs-heading: clamp(34px, 5.4vw, 61px);
  --fs-heading-sm: clamp(28px, 3.8vw, 45px);
  --fs-subheading: clamp(24px, 3vw, 36px);
  --fs-body-lg: clamp(19px, 2vw, 25px);

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Spacing (base 4px) */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-124: 124px;

  /* Layout */
  --page-max-width: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-gap: clamp(64px, 9vw, 112px);
  --card-padding: 24px;
  --header-height: 72px;

  /* Radii */
  --radius-cards: 10px;
  --radius-inputs: 10px;
  --radius-2xl: 16px;
  --radius-largecards: 28px;
  --radius-pill: 9999px;
  --radius-imagemasks: 1000px;

  /* Shadows / elevation (flat system — hairlines first) */
  --shadow-subtle: rgba(14, 15, 12, 0.12) 0px 0px 0px 1px;
  --shadow-subtle-2: rgb(134, 134, 133) 0px 0px 0px 1px inset;
  --shadow-lg: rgba(0, 0, 0, 0.08) 0px 6px 20px 0px;
  --shadow-xl: rgba(0, 0, 0, 0.15) 0px 10px 32px 0px, rgba(0, 0, 0, 0.04) 0px 40px 40px 0px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
}