/* RemTeam - design tokens. Brand colours measured from the logo (clean emblem screenshot). */

:root {
  /* Brand */
  --brand-500: #1f97e9;
  --brand-600: #1477b8;
  --brand-700: #0f6ba8;
  --brand-800: #0b5487;
  --brand-100: #e6f4fd;
  --brand-50: #f2faff;
  --brand-ink: #0c2233;

  /* Neutrals - light */
  --ink: #111214;
  --ink-soft: #2a2e33;
  --text: #3f464e;
  --muted: #5a6068;
  --line: #e3e7e9;
  --line-strong: #cdd4d8;
  --bg: #f5f6f4;
  --surface: #ffffff;
  --surface-2: #eef2f4;

  /* Neutrals - dark */
  --bg-dark: #0c0d0f;
  --surface-dark: #16181b;
  --surface-dark-2: #1d2024;
  --line-dark: rgba(255, 255, 255, 0.12);
  --text-dark: #e9edf0;
  --muted-dark: #a8afb7;

  /* Accents */
  --white: #ffffff;
  --success: #1f9d61;
  --wa: #25d366;
  --wa-dark: #128c4a;
  --star: #f4b740;
  --danger: #d64545;

  /* Typography */
  --font-head: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3: clamp(1.95rem, 1.55rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.7rem + 3.4vw, 4.35rem);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(12, 13, 15, 0.06);
  --shadow-sm: 0 1px 2px rgba(12, 13, 15, 0.06), 0 10px 30px rgba(12, 13, 15, 0.06);
  --shadow-md: 0 18px 50px rgba(12, 13, 15, 0.12);
  --shadow-lg: 0 30px 90px rgba(12, 13, 15, 0.22);
  --shadow-brand: 0 14px 40px rgba(31, 151, 233, 0.28);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(58px, 8vw, 108px);
  --header-h: 74px;
  --promo-h: 38px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.45s;
}