@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Typography */
  --cp-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cp-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Four-point spacing grid */
  --cp-space-1: 0.25rem;
  --cp-space-2: 0.5rem;
  --cp-space-3: 0.75rem;
  --cp-space-4: 1rem;
  --cp-space-5: 1.25rem;
  --cp-space-6: 1.5rem;
  --cp-space-8: 2rem;
  --cp-space-10: 2.5rem;

  /* Shape, motion and depth */
  --cp-radius-sm: 0.75rem;
  --cp-radius-md: 1rem;
  --cp-radius-lg: 1.25rem;
  --cp-radius-xl: 1.75rem;
  --cp-radius-pill: 999px;
  --cp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cp-transition: 180ms var(--cp-ease);
  --cp-shadow-xs: 0 1px 2px rgba(47, 23, 30, 0.05), 0 8px 24px rgba(47, 23, 30, 0.035);
  --cp-shadow-sm: 0 14px 38px rgba(47, 23, 30, 0.09);
  --cp-shadow-lg: 0 32px 90px rgba(32, 12, 18, 0.18);

  /* Light theme */
  --cp-bg: #f4eff1;
  --cp-bg-elevated: #faf7f8;
  --cp-surface: #fffdfd;
  --cp-surface-raised: #ffffff;
  --cp-surface-muted: #f8f2f4;
  --cp-surface-hover: #f2e8eb;
  --cp-text: #21171a;
  --cp-text-soft: #4e4045;
  --cp-muted: #74676c;
  --cp-subtle: #998c91;
  --cp-border: rgba(64, 31, 41, 0.10);
  --cp-border-strong: rgba(64, 31, 41, 0.18);
  --cp-overlay: rgba(24, 9, 14, 0.28);

  --cp-primary: #c92f49;
  --cp-primary-hover: #aa2038;
  --cp-primary-soft: rgba(201, 47, 73, 0.10);
  --cp-primary-border: rgba(201, 47, 73, 0.25);
  --cp-focus: rgba(201, 47, 73, 0.20);
  --cp-success: #16855a;
  --cp-success-soft: #e9f7f0;
  --cp-warning: #a96513;
  --cp-warning-soft: #fff4df;
  --cp-danger: #c9304d;
  --cp-danger-soft: #fff0f3;
  --cp-info: #506ba6;
  --cp-info-soft: #eef2fb;

  /* Metronic bridge: components and utilities consume the same tokens. */
  --tw-sidebar-width: 18.75rem;
  --tw-sidebar-default-width: 18.75rem;
  --tw-sidebar-width-collapse: 5.25rem;
  --tw-header-height: 4.5rem;
  --tw-primary: var(--cp-primary);
  --tw-primary-active: var(--cp-primary-hover);
  --tw-primary-light: var(--cp-primary-soft);
  --tw-primary-clarity: var(--cp-primary-border);
  --tw-primary-inverse: #ffffff;
  --tw-light: var(--cp-surface);
  --tw-light-active: var(--cp-surface-muted);
  --tw-light-light: var(--cp-surface);
  --tw-light-inverse: var(--cp-text-soft);
  --tw-gray-100: var(--cp-surface-muted);
  --tw-gray-200: var(--cp-border);
  --tw-gray-300: var(--cp-border-strong);
  --tw-gray-400: #c9bdc1;
  --tw-gray-500: var(--cp-subtle);
  --tw-gray-600: var(--cp-muted);
  --tw-gray-700: var(--cp-text-soft);
  --tw-gray-800: #392d31;
  --tw-gray-900: var(--cp-text);
  --tw-success: var(--cp-success);
  --tw-success-active: #106c48;
  --tw-success-light: var(--cp-success-soft);
  --tw-success-clarity: rgba(22, 133, 90, 0.22);
  --tw-warning: var(--cp-warning);
  --tw-warning-active: #89500b;
  --tw-warning-light: var(--cp-warning-soft);
  --tw-warning-clarity: rgba(169, 101, 19, 0.22);
  --tw-danger: var(--cp-danger);
  --tw-danger-active: #a9233d;
  --tw-danger-light: var(--cp-danger-soft);
  --tw-danger-clarity: rgba(201, 48, 77, 0.22);
  --tw-info: var(--cp-info);
  --tw-info-active: #40598f;
  --tw-info-light: var(--cp-info-soft);
  --tw-info-clarity: rgba(80, 107, 166, 0.22);
}

:root.dark {
  color-scheme: dark;
  --cp-bg: #080506;
  --cp-bg-elevated: #0e090b;
  --cp-surface: #151012;
  --cp-surface-raised: #1a1215;
  --cp-surface-muted: #1d1518;
  --cp-surface-hover: #271a1f;
  --cp-text: #fffafa;
  --cp-text-soft: #d8d0d2;
  --cp-muted: #aaa1a4;
  --cp-subtle: #766b6f;
  --cp-border: rgba(255, 255, 255, 0.09);
  --cp-border-strong: rgba(255, 255, 255, 0.15);
  --cp-overlay: rgba(2, 0, 1, 0.58);
  --cp-primary: #ff5b70;
  --cp-primary-hover: #ff8996;
  --cp-primary-soft: rgba(255, 64, 88, 0.13);
  --cp-primary-border: rgba(255, 91, 112, 0.30);
  --cp-focus: rgba(255, 91, 112, 0.24);
  --cp-success: #5fd69b;
  --cp-success-soft: rgba(81, 197, 138, 0.12);
  --cp-warning: #dfad61;
  --cp-warning-soft: rgba(226, 169, 79, 0.12);
  --cp-danger: #ff6b80;
  --cp-danger-soft: rgba(241, 108, 130, 0.12);
  --cp-info: #91abd8;
  --cp-info-soft: rgba(117, 167, 235, 0.12);
  --cp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24), 0 8px 24px rgba(0, 0, 0, 0.10);
  --cp-shadow-sm: 0 16px 42px rgba(0, 0, 0, 0.30);
  --cp-shadow-lg: 0 34px 100px rgba(0, 0, 0, 0.52);

  --tw-light: var(--cp-surface);
  --tw-light-active: var(--cp-surface-muted);
  --tw-light-light: var(--cp-surface);
  --tw-light-inverse: var(--cp-text-soft);
  --tw-gray-100: var(--cp-surface-muted);
  --tw-gray-200: var(--cp-border);
  --tw-gray-300: var(--cp-border-strong);
  --tw-gray-400: #403338;
  --tw-gray-500: var(--cp-subtle);
  --tw-gray-600: var(--cp-muted);
  --tw-gray-700: var(--cp-text-soft);
  --tw-gray-800: #e6dde0;
  --tw-gray-900: var(--cp-text);
  --tw-coal-100: var(--cp-bg);
  --tw-coal-200: var(--cp-bg-elevated);
  --tw-coal-300: var(--cp-surface);
  --tw-coal-400: var(--cp-surface);
  --tw-coal-500: var(--cp-surface);
  --tw-coal-600: var(--cp-surface-raised);
  --tw-primary: var(--cp-primary);
  --tw-primary-active: var(--cp-primary-hover);
  --tw-primary-light: var(--cp-primary-soft);
  --tw-primary-clarity: var(--cp-primary-border);
  --tw-success: var(--cp-success);
  --tw-success-active: #6bd49d;
  --tw-success-light: var(--cp-success-soft);
  --tw-warning: var(--cp-warning);
  --tw-warning-active: #f0bb69;
  --tw-warning-light: var(--cp-warning-soft);
  --tw-danger: var(--cp-danger);
  --tw-danger-active: #ff8799;
  --tw-danger-light: var(--cp-danger-soft);
  --tw-info: var(--cp-info);
  --tw-info-active: #91bbf2;
  --tw-info-light: var(--cp-info-soft);
}