/* Canonical light Client Portal tokens from the supplied Product Design. */
:root {
  /* Brand — official */
  --cm-brand-navy: #0D3248;
  --cm-brand-navy-deep: #09212F;
  --cm-brand-blue: #237BB2;
  --cm-brand-sky: #8BBEDD;
  --cm-brand-white: #FFFFFF;

  /* Brand scale — product extension */
  --cm-brand-50: #F3F8FB;
  --cm-brand-100: #DCECF5;
  --cm-brand-200: #B7D8EA;
  --cm-brand-300: #8BBEDD;
  --cm-brand-400: #5B9FC8;
  --cm-brand-500: #237BB2;
  --cm-brand-600: #1D6A99;
  --cm-brand-700: #17577D;
  --cm-brand-800: #0D3248;
  --cm-brand-900: #09212F;

  /* Light semantic surfaces */
  --cm-bg-canvas: #F7FAFC;
  --cm-bg-surface: #FFFFFF;
  --cm-bg-surface-soft: #EFF5F8;
  --cm-bg-surface-hover: #E8F1F5;
  --cm-bg-raised: #FFFFFF;

  --cm-text-primary: #0A2433;
  --cm-text-secondary: #4F6674;
  --cm-text-muted: #718793;
  --cm-text-on-brand: #FFFFFF;

  --cm-border-default: #D8E4EA;
  --cm-border-soft: #E7EFF3;
  --cm-border-strong: #B7CBD6;

  /* Actions */
  --cm-action-primary: #0D3248;
  --cm-action-primary-hover: #09212F;
  --cm-action-interactive: #237BB2;
  --cm-action-interactive-hover: #1D6A99;
  --cm-focus-ring: rgba(35, 123, 178, .35);

  /* Semantic */
  --cm-success: #15803D;
  --cm-success-soft: #ECFDF3;
  --cm-warning: #B7791F;
  --cm-warning-soft: #FFF8E6;
  --cm-danger: #C83E3E;
  --cm-danger-soft: #FFF1F1;
  --cm-info: #237BB2;
  --cm-info-soft: #EEF7FC;

  /* Typography */
  --cm-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --cm-text-xs: 0.75rem;     /* 12 */
  --cm-text-sm: 0.8125rem;   /* 13 */
  --cm-text-ui: 0.875rem;    /* 14 */
  --cm-text-base: 1rem;      /* 16 */
  --cm-text-lg: 1.125rem;    /* 18 */
  --cm-text-xl: 1.25rem;     /* 20 */
  --cm-text-2xl: 1.5rem;     /* 24 */
  --cm-text-3xl: 2rem;       /* 32 */
  --cm-text-4xl: 2.5rem;     /* 40 */
  --cm-text-5xl: 3rem;       /* 48 */

  /* Spacing */
  --cm-space-1: 0.25rem;  /* 4 */
  --cm-space-2: 0.5rem;   /* 8 */
  --cm-space-3: 0.75rem;  /* 12 */
  --cm-space-4: 1rem;     /* 16 */
  --cm-space-5: 1.25rem;  /* 20 */
  --cm-space-6: 1.5rem;   /* 24 */
  --cm-space-8: 2rem;     /* 32 */
  --cm-space-10: 2.5rem;  /* 40 */
  --cm-space-12: 3rem;    /* 48 */
  --cm-space-16: 4rem;    /* 64 */
  --cm-space-20: 5rem;    /* 80 */
  --cm-space-24: 6rem;    /* 96 */

  /* Radius */
  --cm-radius-xs: 0.5rem;    /* 8 */
  --cm-radius-sm: 0.75rem;   /* 12 */
  --cm-radius-md: 1rem;      /* 16 */
  --cm-radius-lg: 1.25rem;   /* 20 */
  --cm-radius-xl: 1.5rem;    /* 24 */
  --cm-radius-2xl: 1.75rem;  /* 28 */
  --cm-radius-full: 999px;

  /* Controls */
  --cm-control-sm: 2.25rem; /* 36 */
  --cm-control-md: 2.625rem; /* 42 */
  --cm-control-lg: 3rem; /* 48 */

  /* Elevation */
  --cm-shadow-sm: 0 1px 2px rgba(9, 33, 47, .04);
  --cm-shadow-md: 0 1px 2px rgba(9, 33, 47, .04), 0 8px 24px rgba(9, 33, 47, .06);
  --cm-shadow-lg: 0 8px 24px rgba(9, 33, 47, .08), 0 24px 60px rgba(9, 33, 47, .10);

  /* Motion */
  --cm-duration-micro: 140ms;
  --cm-duration-fast: 180ms;
  --cm-duration-base: 220ms;
  --cm-duration-slow: 300ms;
  --cm-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --cm-sidebar-width: 16rem; /* 256 */
  --cm-topbar-height: 3.75rem; /* 60 */
  --cm-page-padding: 2rem; /* 32 */
  --cm-content-max: 90rem; /* 1440 */
}

@media (max-width:767px) {
  :root { --cm-page-padding: var(--cm-space-4); --cm-topbar-height: 3.5rem; }
}