:root {
  --brand-primary: #4353D6;
  --brand-primary-hover: #3A47B8;
  --brand-primary-muted: #9BA4E8;
  --brand-navy: #0F2A52;
  --brand-navy-light: #7E9BC0;
  --avatar-gold: #D9B87C;

  --text-primary: #1A1A1A;
  --text-body: #4A4A4A;
  --text-muted: #8A8A8A;

  --surface: #FFFFFF;
  --surface-subtle: #F7F8FA;
  --surface-input: #EDEEF0;
  --border: #E4E6EA;

  --star-filled: #F5A623;
  --star-empty: #D8D8D8;

  --danger: #D93F3F;

  --radius-card: 12px;
  --radius-input: 10px;
  --radius-pill: 999px;
  --radius-badge: 6px;

  --card-border: 1px solid var(--border);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --nav-height: 60px;
  --page-max: 1240px;
  --grid-gutter: 20px;
  --card-padding: 20px;

  --font-sans: "Poppins", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  /* ===== Motion =====
     Three durations and two curves, so every transition on the site is
     paced from the same scale instead of ad-hoc 0.15s/0.2s/0.3s values.

     --ease-out decelerates hard at the end: things entering, expanding or
     responding to a hover land softly instead of stopping dead (the flat
     `ease` keyword was making hovers feel abrupt).
     --ease-in-out is symmetric, for things moving between two on-screen
     positions where both ends should feel equally weighted. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Hover/press feedback should feel instant; anything that moves a real
     distance needs longer or it reads as a jump rather than a movement. */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}