/* ============================================================
   Design tokens — warm off-white, periwinkle primary, HR-tool
   design language. Brand layer is neutral/swappable.
   ============================================================ */
:root {
  /* --- surfaces --- */
  --bg:            #F5F4F1;   /* warm off-white page bg */
  --bg-2:          #F1EFEA;
  --surface:       #FFFFFF;
  --surface-sunken:#FAF9F6;

  /* --- ink --- */
  --ink:           #21201E;   /* warm near-black text */
  --ink-2:         #56524F;   /* secondary text */
  --ink-3:         #8A8683;   /* muted / placeholder */
  --line:          #E5E2DC;   /* hairline borders */
  --line-strong:   #D8D4CD;

  /* --- brand accents (from reference design language) --- */
  --primary:       #4C6FFB;   /* periwinkle-blue: buttons + selected */
  --primary-ink:   #FFFFFF;
  --primary-soft:  #EDF0FE;
  --primary-line:  #C9D3FC;
  --primary-700:   #3B57DB;

  --green:         #10A065;   /* CTA green */
  --green-bright:  #16C47F;
  --teal:          #3AB7A9;
  --dark-green:    #142F25;   /* dark sections + app sidebar */
  --dark-green-2:  #1C3B2E;

  --pink:          #F7CFE0;   /* soft pink section */
  --pink-ink:      #7A2748;
  --lilac:         #C9D2F4;   /* light blue "book a demo" */
  --purple:        #6C5CE7;
  --panel-dark:    #2A2724;   /* warm dark testimonial panel */

  /* --- semantic --- */
  --danger:        #D64545;
  --danger-soft:   #FBEAEA;

  /* --- radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- elevation --- */
  --sh-sm: 0 1px 2px rgba(26,22,18,.06), 0 1px 1px rgba(26,22,18,.04);
  --sh-md: 0 6px 16px rgba(26,22,18,.08), 0 2px 4px rgba(26,22,18,.05);
  --sh-lg: 0 18px 44px rgba(26,22,18,.14), 0 6px 14px rgba(26,22,18,.08);
  --sh-card: 0 2px 0 rgba(26,22,18,.04), 0 10px 30px rgba(26,22,18,.07);

  /* --- type --- */
  --font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* --- layout --- */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.2,.7,.2,1);
}