/* Onuitgesproke Stories design system. Match Figma's desktop and mobile frames. */
:root {
  --cream: #fff5ee;
  --white: #fff;
  --orange: #e8461c;
  --orange-deep: #da4d1f;
  --pink: #f2b8d2;
  --pink-soft: #fad0e4;
  --pink-strong: #f076aa;
  --peach: #f7d0b1;
  --peach-tag: #f7a07a;
  --coral: #eb844c;
  --blue-light: #b8daf1;
  --blue: #5d86c7;
  --navy: #4e091e;
  --plum: #4e091e;
  --brown: #400a0a;
  --gold: #bfa739;
  --pink-tag: #d52d68;
  --peach-border: #f2af7f;
  --peach-light: #fac7ae;
  --ink: #000;
  --brown-dark: #3e120c;
  --shadow-overlay: #0002;
  --nav-overlay: #4e091e80;
  --orange-pattern: #d54821;
  --orange-hover: #fad6c4;
  --service-border: #e9dcd6;
  --card-shadow: #400a0a0b;
  --font-body: "Lato", Arial, sans-serif;
  --page-width: 1600px;
  --page-gutter: clamp(24px, 3.96vw, 57px);
  --nav-sidebar-width: 320px;
  --heading-size: 43px;
  --radius-card: 20px;
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
}