:root {
  --olive-50:  oklch(0.96 0.030 108.2);
  --olive-100: oklch(0.93 0.045 108.2);
  --olive-200: oklch(0.88 0.060 108.2);
  --olive-300: oklch(0.75 0.100 108.2);
  --olive-400: oklch(0.64 0.115 108.2);
  --olive-500: oklch(0.54 0.110 108.2);
  --olive-600: oklch(0.44 0.090 108.2);
  --olive-700: oklch(0.375 0.075 108.2);
  --olive-800: oklch(0.30 0.060 108.2);
  --olive-900: oklch(0.23 0.045 108.2);

  --pink-50:  oklch(0.95 0.040 350.5);
  --pink-100: oklch(0.90 0.070 350.5);
  --pink-200: oklch(0.85 0.100 350.5);
  --pink-300: oklch(0.70 0.180 350.5);
  --pink-400: oklch(0.64 0.230 350.5);
  --pink-500: oklch(0.58 0.270 350.5);
  --pink-600: oklch(0.47 0.210 350.5);
  --pink-700: oklch(0.42 0.220 350.5);
  --pink-800: oklch(0.35 0.180 350.5);
  --pink-900: oklch(0.28 0.140 350.5);

  --cream:      #FBF9F4;
  --ivory:      #F5F2E9;
  --white:      #FFFFFF;
  --sand-50:  #F7F6F1;
  --sand-100: #EFEDE4;
  --sand-200: #E2DFD3;
  --sand-300: #CDC9B9;
  --sand-400: #ABA692;
  --sand-500: #837E68;
  --sand-600: #605C4A;
  --sand-700: #454234;
  --sand-800: #2C2A20;
  --sand-900: #1B1A12;
  --ink:        #1F2012;

  --success:      #1F8A5B;
  --warning:      #B76E00;
  --danger:       #C0392B;
  --info:         #2A6F9E;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'DM Serif Display', serif;

  /* Layout */
  --sidebar-width: 230px; /* Matched handoff */
  --header-height: 64px; /* Slightly smaller topbar if needed */
  
  /* Utilities */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-pill: 9999px;
  --border-subtle: var(--sand-200);
  --border-strong: var(--sand-300);
  --border-soft: var(--sand-100);

  /* Text and surface roles.
     These were referenced throughout the admin views and components but never
     defined anywhere — an undefined custom property with no fallback makes the
     whole declaration invalid, so every `color: var(--text-strong)` fell back to
     inherited text and every badge rendered on a transparent background. */
  --text-strong: var(--ink);
  --text-body: var(--sand-700);
  --text-muted: var(--sand-500);
  --surface-sunken: var(--sand-50);

  /* Tinted backgrounds for the badge tones. */
  --success-bg: #E6F3EC;
  --warning-bg: #FBF0E0;
  --danger-bg:  #F8E8E5;
  --info-bg:    #E7EFF6;

  --shadow-sm: 0 1px 2px 0 rgb(31 32 18 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(31 32 18 / 0.10);
  --shadow-lg: 0 16px 40px -12px rgb(31 32 18 / 0.22);

  /* Motion.
     The slide-over panels are the main navigation gesture in the panel now, so
     their curve is a token rather than a magic number repeated per component.
     Asymmetric on purpose: entering decelerates into place (it is the thing you
     asked for), leaving accelerates away (it is already gone from your mind). */
  --ease-panel-in: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-panel-out: cubic-bezier(0.4, 0, 1, 1);
  --dur-panel-in: 320ms;
  --dur-panel-out: 240ms;

  /* Legacy overrides to match old codebase references */
  --color-white: var(--white);
  --color-pink-base: var(--pink-500);
  --color-olive-base: var(--olive-600);
  --color-gray-50: var(--sand-50);
  --color-gray-100: var(--sand-100);
  --color-gray-200: var(--sand-200);
  --color-gray-300: var(--sand-300);
  --color-gray-400: var(--sand-400);
  --color-gray-500: var(--sand-500);
  --color-gray-700: var(--sand-700);
  --color-gray-900: var(--ink);
}

body {
  font-family: var(--font-sans);
  color: var(--color-gray-900);
  background-color: var(--color-gray-50);
  margin: 0;
  padding: 0;
}