@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.625rem;
  --cp-radius-md: 0.875rem;
  --cp-radius-lg: 1.125rem;
  --cp-radius-xl: 1.5rem;
  --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(16, 24, 40, 0.04);
  --cp-shadow-sm: 0 8px 24px rgba(16, 24, 40, 0.06);
  --cp-shadow-lg: 0 24px 70px rgba(16, 24, 40, 0.12);

  /* Light theme */
  --cp-bg: #f3f4f7;
  --cp-bg-elevated: #f8f9fb;
  --cp-surface: #ffffff;
  --cp-surface-raised: #ffffff;
  --cp-surface-muted: #f7f8fa;
  --cp-surface-hover: #f0f2f6;
  --cp-text: #111827;
  --cp-text-soft: #344054;
  --cp-muted: #667085;
  --cp-subtle: #98a2b3;
  --cp-border: rgba(16, 24, 40, 0.10);
  --cp-border-strong: rgba(16, 24, 40, 0.16);
  --cp-overlay: rgba(17, 24, 39, 0.18);

  --cp-primary: #315fe8;
  --cp-primary-hover: #244fce;
  --cp-primary-soft: rgba(49, 95, 232, 0.10);
  --cp-primary-border: rgba(49, 95, 232, 0.24);
  --cp-focus: rgba(49, 95, 232, 0.22);
  --cp-success: #15945f;
  --cp-success-soft: #e9f8f1;
  --cp-warning: #b66c0a;
  --cp-warning-soft: #fff5df;
  --cp-danger: #d13c58;
  --cp-danger-soft: #fff0f3;
  --cp-info: #3977c8;
  --cp-info-soft: #edf5ff;

  /* 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: #d0d5dd;
  --tw-gray-500: var(--cp-subtle);
  --tw-gray-600: var(--cp-muted);
  --tw-gray-700: var(--cp-text-soft);
  --tw-gray-800: #1d2939;
  --tw-gray-900: var(--cp-text);
  --tw-success: var(--cp-success);
  --tw-success-active: #11794e;
  --tw-success-light: var(--cp-success-soft);
  --tw-success-clarity: rgba(21, 148, 95, 0.22);
  --tw-warning: var(--cp-warning);
  --tw-warning-active: #925507;
  --tw-warning-light: var(--cp-warning-soft);
  --tw-warning-clarity: rgba(182, 108, 10, 0.22);
  --tw-danger: var(--cp-danger);
  --tw-danger-active: #b62f49;
  --tw-danger-light: var(--cp-danger-soft);
  --tw-danger-clarity: rgba(209, 60, 88, 0.22);
  --tw-info: var(--cp-info);
  --tw-info-active: #2e65ad;
  --tw-info-light: var(--cp-info-soft);
  --tw-info-clarity: rgba(57, 119, 200, 0.22);
}

:root.dark {
  color-scheme: dark;
  --cp-bg: #080a0f;
  --cp-bg-elevated: #0d1017;
  --cp-surface: #12151d;
  --cp-surface-raised: #171a23;
  --cp-surface-muted: #1a1e28;
  --cp-surface-hover: #202530;
  --cp-text: #f1f4f9;
  --cp-text-soft: #c9d1df;
  --cp-muted: #929bad;
  --cp-subtle: #697386;
  --cp-border: rgba(255, 255, 255, 0.09);
  --cp-border-strong: rgba(255, 255, 255, 0.15);
  --cp-overlay: rgba(2, 6, 16, 0.24);
  --cp-primary: #6f92ff;
  --cp-primary-hover: #87a5ff;
  --cp-primary-soft: rgba(111, 146, 255, 0.13);
  --cp-primary-border: rgba(111, 146, 255, 0.28);
  --cp-focus: rgba(111, 146, 255, 0.25);
  --cp-success: #51c58a;
  --cp-success-soft: rgba(81, 197, 138, 0.12);
  --cp-warning: #e2a94f;
  --cp-warning-soft: rgba(226, 169, 79, 0.12);
  --cp-danger: #f16c82;
  --cp-danger-soft: rgba(241, 108, 130, 0.12);
  --cp-info: #75a7eb;
  --cp-info-soft: rgba(117, 167, 235, 0.12);
  --cp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --cp-shadow-sm: 0 12px 32px rgba(0, 0, 0, 0.22);
  --cp-shadow-lg: 0 30px 90px rgba(0, 0, 0, 0.42);

  --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: #353b48;
  --tw-gray-500: var(--cp-subtle);
  --tw-gray-600: var(--cp-muted);
  --tw-gray-700: var(--cp-text-soft);
  --tw-gray-800: #dde3ed;
  --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);
}