:root {
  /* Brand */
  --rollin-color-ink: #090909;
  --rollin-color-paper: #ffffff;
  --rollin-color-canvas: #f5f5f2;
  --rollin-color-muted: #666765;
  --rollin-color-line: #e5e5e1;

  /* Accent palette inspired by the supplied ROLLIN visual */
  --rollin-color-cyan: #49cde2;
  --rollin-color-magenta: #d83cb6;
  --rollin-color-yellow: #f4d54b;
  --rollin-color-green: #5acb91;
  --rollin-color-orange: #f3a54b;
  --rollin-color-blue: #3996db;

  /* Typography */
  --rollin-font-body: Arial, Helvetica, sans-serif;
  --rollin-font-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --rollin-text-xs: 0.75rem;
  --rollin-text-sm: 0.875rem;
  --rollin-text-md: 1rem;
  --rollin-text-lg: 1.125rem;
  --rollin-text-xl: 1.375rem;
  --rollin-heading-sm: clamp(1.25rem, 1.8vw, 1.65rem);
  --rollin-heading-md: clamp(1.8rem, 3vw, 2.7rem);
  --rollin-heading-lg: clamp(2.6rem, 5.8vw, 5.8rem);

  /* Layout and spacing */
  --rollin-container: 1440px;
  --rollin-gutter: clamp(1rem, 2.2vw, 2rem);
  --rollin-space-1: 0.25rem;
  --rollin-space-2: 0.5rem;
  --rollin-space-3: 0.75rem;
  --rollin-space-4: 1rem;
  --rollin-space-5: 1.5rem;
  --rollin-space-6: 2rem;
  --rollin-space-7: 3rem;
  --rollin-space-8: 4.5rem;

  /* Surfaces */
  --rollin-radius-sm: 2px;
  --rollin-radius-md: 6px;
  --rollin-radius-lg: 12px;
  --rollin-shadow-card: 0 4px 18px rgb(0 0 0 / 8%);
  --rollin-shadow-hover: 0 8px 28px rgb(0 0 0 / 14%);

  /* Motion */
  --rollin-transition: 180ms ease;
}