@layer crm-guards, crm-tokens, crm-base, crm-components, crm-responsive, crm-print;

@layer crm-tokens {
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2?v=30911c9db595b7619eb8f8a334e376f3efbde741886e3c7b028b61d44dcd9070") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette samples are immutable illustrations, independent of workspace accent. */
  --crm-preview-blue: #087de0;
  --crm-preview-blue-deep: #0455a4;
  --crm-preview-blue-soft: #a7cffa;
  --crm-preview-red: #c43e38;
  --crm-preview-red-deep: #9e2b28;
  --crm-preview-red-soft: #f0bcb8;
  --crm-preview-green: #237b55;
  --crm-preview-green-deep: #175f40;
  --crm-preview-green-soft: #b6dcc9;
  --crm-preview-orange: #b85408;
  --crm-preview-orange-deep: #913e04;
  --crm-preview-orange-soft: #f3cca9;
  --crm-preview-purple: #7654bc;
  --crm-preview-purple-deep: #573796;
  --crm-preview-purple-soft: #d2c3ed;
  --crm-preview-graphite: #626873;
  --crm-preview-graphite-deep: #424750;
  --crm-preview-graphite-soft: #c4c8cf;

  /* Paper is a fixed light material; only its organization accent varies. */
  --crm-paper-bg: #ffffff;
  --crm-paper-ink: #17202a;
  --crm-paper-ink-soft: #35414a;
  --crm-paper-ink-muted: #5f6b74;
  --crm-logo-plate-light: #ffffff;
  --crm-logo-plate-dark: #20242b;
  --crm-paper-rule: #dce4e9;
  --crm-paper-surface: #f3f6f8;
  --crm-paper-warning: #6c4a16;
  --crm-paper-watermark: rgba(28, 52, 72, 0.035);
  --crm-print-accent: #075fad;
  --crm-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%233a3a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --crm-color-ink: #1d1d1f;
  --crm-color-ink-soft: #3a3a3c;
  --crm-color-ink-muted: #6e6e73;
  --crm-color-canvas: #f5f5f7;
  --crm-color-canvas-deep: #e8ebef;
  --crm-color-surface: rgba(255, 255, 255, 0.88);
  --crm-color-surface-strong: #ffffff;

  --crm-color-glass-base: rgba(248, 249, 251, 0.78);
  --crm-color-glass: rgba(255, 255, 255, 0.8);
  --crm-color-glass-elevated: rgba(255, 255, 255, 0.92);
  --crm-color-glass-dense: rgba(255, 255, 255, 0.96);
  --crm-color-glass-highlight: rgba(255, 255, 255, 0.72);
  --crm-color-glass-highlight-strong: #ffffff;
  --crm-color-glass-shadow: rgba(35, 45, 58, 0.11);
  --crm-color-backdrop: rgba(8, 12, 20, 0.38);
  --crm-color-glass-warning: rgba(255, 239, 215, 0.64);
  --crm-color-glass-danger: rgba(255, 228, 226, 0.68);

  --crm-color-border: rgba(60, 60, 67, 0.1);
  --crm-color-border-strong: rgba(60, 60, 67, 0.16);
  --crm-color-border-cool: rgba(0, 113, 227, 0.16);
  --crm-color-border-hot: rgba(0, 113, 227, 0.44);

  --crm-color-accent: #0071e3;
  --crm-color-accent-hover: #0077ed;
  --crm-color-accent-deep: #0058b0;
  --crm-color-accent-soft: rgba(0, 113, 227, 0.1);
  --crm-color-blue: #297fca;
  --crm-color-blue-soft: rgba(41, 127, 202, 0.12);
  --crm-color-slate: #8e8e93;
  --crm-color-orange: #c66b12;
  --crm-color-orange-soft: rgba(198, 107, 18, 0.12);

  --crm-color-success: #248a3d;
  --crm-color-success-soft: rgba(36, 138, 61, 0.11);
  --crm-color-warning: #8b5a00;
  --crm-color-warning-soft: rgba(198, 128, 0, 0.12);
  --crm-color-danger: #ba2d2d;
  --crm-color-danger-soft: rgba(186, 45, 45, 0.1);
  --crm-color-focus: #005fc7;
  --crm-color-on-accent: #ffffff;
  --crm-nav-active-number-bg: color-mix(in srgb, var(--crm-color-accent) 30%, #101820);
  --crm-nav-active-number-ink: var(--crm-color-on-accent);
  --crm-color-link: #075fad;
  --crm-color-link-hover: #064f91;

  /* Ambient materials follow the organization palette without changing
     status colors. The blue values preserve the accepted desktop scene. */
  --crm-ambient-1: rgba(255, 212, 170, 0.3);
  --crm-ambient-2: rgba(180, 220, 229, 0.34);
  --crm-ambient-3: rgba(165, 212, 190, 0.2);
  --crm-orb-a-core: rgba(140, 194, 208, 0.32);
  --crm-orb-a-start: rgba(239, 249, 250, 0.58);
  --crm-orb-a-end: rgba(168, 200, 208, 0.22);
  --crm-orb-b-core: rgba(244, 171, 101, 0.29);
  --crm-orb-b-start: rgba(255, 232, 204, 0.44);
  --crm-orb-b-end: rgba(226, 169, 112, 0.2);
  --crm-orb-c-core: rgba(70, 152, 124, 0.24);
  --crm-orb-c-start: rgba(198, 231, 215, 0.42);
  --crm-orb-c-end: rgba(68, 139, 116, 0.18);

  --crm-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --crm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --crm-text-xs: 0.75rem;
  --crm-text-sm: 0.8125rem;
  --crm-text-md: 0.9375rem;
  --crm-text-lg: 1rem;
  --crm-text-xl: clamp(1.12rem, 1.55vw, 1.42rem);
  --crm-text-hero: clamp(2rem, 3vw, 2.65rem);

  /* Shared desktop component scale. Edit these tokens, not page modules. */
  --crm-type-caption: max(var(--crm-text-xs), 12px);
  --crm-type-label: max(var(--crm-text-sm), 13px);
  --crm-type-control: 0.875rem;
  --crm-type-body: var(--crm-text-md);
  --crm-type-section: 1.1875rem;
  --crm-type-dialog: 1.5rem;
  --crm-type-page: clamp(2rem, 2.45vw, 2.7rem);
  --crm-control-height: 2.75rem;
  --crm-control-radius: 0.8rem;
  --crm-panel-radius: 1.25rem;
  --crm-subpanel-radius: 1rem;
  --crm-dialog-radius: 1.4rem;
  --crm-component-inset: 1.25rem;
  --crm-component-gap: 0.75rem;
  --crm-component-rule: rgba(60, 60, 67, 0.12);
  --crm-inset: var(--crm-component-inset);
  --crm-gap: var(--crm-component-gap);
  --crm-rule: var(--crm-component-rule);
  --crm-control-border: rgba(74, 91, 107, 0.18);
  --crm-control-bg: rgba(255, 255, 255, 0.9);
  --crm-panel-bg: rgba(250, 252, 254, 0.94);
  --crm-subpanel-bg: rgba(247, 249, 252, 0.82);
  --crm-control-focus-border: rgba(0, 113, 227, 0.58);
  --crm-control-focus-ring: rgba(0, 113, 227, 0.22);
  --crm-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(28, 45, 62, 0.04);
  --crm-subpanel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);

  --crm-action-primary-border: rgba(0, 86, 177, 0.24);
  --crm-action-primary-bg: linear-gradient(180deg, #1685ed, #0068d1);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #218ef5, #006edc);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 7px 18px rgba(0, 94, 196, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 9px 22px rgba(0, 94, 196, 0.24);
  --crm-action-secondary-border: rgba(60, 60, 67, 0.11);
  --crm-action-secondary-bg: rgba(255, 255, 255, 0.9);
  --crm-action-secondary-bg-hover: rgba(255, 255, 255, 0.98);
  --crm-action-secondary-shadow: 0 1px 2px rgba(30, 42, 56, 0.05);
  --crm-action-secondary-shadow-hover: 0 2px 7px rgba(30, 42, 56, 0.08);
  --crm-action-danger-ink: #9b2730;
  --crm-action-danger-border: rgba(155, 39, 48, 0.22);
  --crm-action-danger-border-hover: rgba(155, 39, 48, 0.34);
  --crm-action-danger-bg: rgba(255, 244, 244, 0.96);
  --crm-action-danger-bg-hover: #fff0f1;
  --crm-brand-mark-bg: linear-gradient(145deg, #218cf3, #0069d7);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 10px 24px rgba(0, 113, 227, 0.18);
  --crm-operations-control-bg: rgba(248, 251, 253, 0.76);
  --crm-operations-rule: rgba(64, 91, 116, 0.12);
  --crm-operations-dense-bg: rgba(249, 252, 254, 0.84);

  /* Semantic nested surfaces. Domain modules choose a role; appearance owns
     the actual color so hidden panels cannot leak a light-only literal. */
  --crm-surface-quiet-bg: rgba(235, 241, 246, 0.58);
  --crm-surface-inset-bg: rgba(244, 248, 252, 0.72);
  --crm-surface-raised-bg: rgba(247, 251, 254, 0.78);
  --crm-surface-divider-bg: rgba(63, 91, 116, 0.1);
  --crm-surface-accent-bg: rgba(226, 239, 251, 0.72);

  --crm-space-1: 0.25rem;
  --crm-space-2: 0.5rem;
  --crm-space-3: 0.75rem;
  --crm-space-4: 1rem;
  --crm-space-5: 1.4rem;
  --crm-space-6: 1.9rem;
  --crm-space-7: 2.75rem;
  --crm-space-8: 3.5rem;

  --crm-radius-sm: 0.65rem;
  --crm-radius-md: 0.9rem;
  --crm-radius-lg: 1.25rem;
  --crm-radius-xl: 1.65rem;
  --crm-radius-control: 0.8rem;

  --crm-shadow-base: 0 1px 2px rgba(30, 42, 56, 0.05), 0 12px 30px rgba(30, 42, 56, 0.07);
  --crm-shadow-elevated: 0 2px 6px rgba(30, 42, 56, 0.07), 0 20px 48px rgba(30, 42, 56, 0.12);
  --crm-shadow-interactive: 0 1px 2px rgba(30, 42, 56, 0.06), 0 7px 18px rgba(30, 42, 56, 0.08);

  --crm-blur-base: 12px;
  --crm-blur-elevated: 18px;
  --crm-blur-dense: 8px;

  --crm-motion-fast: 120ms;
  --crm-motion-base: 220ms;
  --crm-motion-press: 100ms;
  --crm-motion-quick: 140ms;
  --crm-motion-standard: 160ms;
  --crm-ease: cubic-bezier(0.2, 0, 0, 1);

  --crm-z-skip-link: 100;
  --crm-z-content: 0;
  --crm-z-sticky: 80;
  --crm-z-popover: 120;
  --crm-z-dialog: 180;
  --crm-z-overlay: 190;
  --crm-z-launch-gate: 200;
  --crm-z-toast: 220;

  --crm-sidebar-width: 11.5rem;
  --crm-sidebar-collapsed-width: 4.5rem;
  --crm-content-max: none;

  /* Shared responsive shell. Domain pages consume these instead of inventing
     their own mobile gutters, dock offsets or touch sizes. */
  --crm-mobile-edge: clamp(0.75rem, 3.5vw, 1.25rem);
  --crm-mobile-dock-height: 4.5rem;
  --crm-mobile-dock-offset: max(0.65rem, env(safe-area-inset-bottom));
  --crm-mobile-content-clearance: calc(
    var(--crm-mobile-dock-height) + var(--crm-mobile-dock-offset) + 1.5rem
  );
  --crm-touch-target: 2.75rem;
}

:root[data-crm-text-scale="compact"] {
  --crm-type-caption: max(0.7rem, 12px);
  --crm-type-label: max(0.75rem, 12px);
  --crm-type-control: 0.8125rem;
  --crm-type-body: 0.875rem;
  --crm-type-section: 1.0625rem;
  --crm-type-dialog: 1.375rem;
  --crm-type-page: clamp(1.8rem, 2.25vw, 2.45rem);
  --crm-control-height: max(2.75rem, 44px);
  --crm-touch-target: max(2.75rem, 44px);
}

:root[data-crm-text-scale="normal"] {
  --crm-type-caption: max(var(--crm-text-xs), 12px);
  --crm-type-label: max(var(--crm-text-sm), 13px);
  --crm-type-control: 0.875rem;
  --crm-type-body: var(--crm-text-md);
  --crm-type-section: 1.1875rem;
  --crm-type-dialog: 1.5rem;
  --crm-type-page: clamp(2rem, 2.45vw, 2.7rem);
}

:root[data-crm-text-scale="large"] {
  --crm-type-caption: 0.8125rem;
  --crm-type-label: 0.9rem;
  --crm-type-control: 1rem;
  --crm-type-body: 1.0625rem;
  --crm-type-section: 1.3rem;
  --crm-type-dialog: 1.65rem;
  --crm-type-page: clamp(2.15rem, 2.6vw, 2.9rem);
  --crm-control-height: max(2.75rem, 44px);
  --crm-touch-target: max(2.75rem, 44px);
}

/* Compact action targets keep their 44px hit area as nearby text grows. */
:is(.crm-planner-icon-button, .crm-planner-header, .crm-planner-mobile-bays,
    .crm-product-tip, .crm-compact-intro-toggle,
    .crm-date-control[data-stacked="true"] > .crm-date-control__open) {
  --crm-touch-target: 44px;
}

@media (max-width: 560px) {
  .crm-day-picker { --crm-type-control: var(--crm-type-caption); }
}

.crm-print-sheet {
  --crm-color-ink: var(--crm-paper-ink);
  --crm-color-ink-soft: var(--crm-paper-ink-soft);
  --crm-color-ink-muted: var(--crm-paper-ink-muted);
}

:root[data-crm-appearance="dark"] {
  color-scheme: dark;
  --crm-color-ink: #f5f5f7;
  --crm-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23dedee2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --crm-color-ink-soft: #dedee2;
  --crm-color-ink-muted: #a8a8ad;
  --crm-color-canvas: #111215;
  --crm-color-canvas-deep: #181a1f;
  --crm-color-surface: rgba(32, 34, 40, 0.9);
  --crm-color-surface-strong: #25272d;
  --crm-color-glass-base: rgba(23, 25, 30, 0.86);
  --crm-color-glass: rgba(35, 37, 43, 0.86);
  --crm-color-glass-elevated: rgba(42, 44, 51, 0.94);
  --crm-color-glass-dense: rgba(38, 40, 47, 0.98);
  --crm-color-glass-highlight: rgba(255, 255, 255, 0.08);
  --crm-color-glass-highlight-strong: rgba(255, 255, 255, 0.13);
  --crm-color-glass-shadow: rgba(0, 0, 0, 0.34);
  --crm-color-border: rgba(235, 235, 245, 0.14);
  --crm-color-border-strong: rgba(235, 235, 245, 0.22);
  --crm-control-border: rgba(235, 235, 245, 0.19);
  --crm-control-bg: rgba(40, 42, 49, 0.96);
  --crm-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.18);
  --crm-panel-bg: rgba(31, 33, 39, 0.96);
  --crm-subpanel-bg: rgba(38, 40, 47, 0.86);
  --crm-component-rule: rgba(235, 235, 245, 0.15);
  --crm-action-secondary-border: rgba(235, 235, 245, 0.18);
  --crm-action-secondary-bg: rgba(45, 47, 54, 0.96);
  --crm-action-secondary-bg-hover: rgba(55, 57, 65, 0.98);
  --crm-action-primary-bg: linear-gradient(180deg, #0b63b7, #064a8c);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #0c70cb, #07559d);
  --crm-color-success: #55c96f;
  --crm-color-success-soft: rgba(85, 201, 111, 0.15);
  --crm-color-warning: #e6ad45;
  --crm-color-warning-soft: rgba(230, 173, 69, 0.16);
  --crm-color-danger: #ff7878;
  --crm-color-danger-soft: rgba(255, 120, 120, 0.15);
  --crm-color-link: #72b7ff;
  --crm-color-link-hover: #9accff;
  --crm-color-focus: #77b9ff;
  --crm-operations-control-bg: rgba(40, 42, 49, 0.96);
  --crm-operations-rule: rgba(235, 235, 245, 0.15);
  --crm-operations-dense-bg: rgba(35, 37, 43, 0.9);
  --crm-surface-quiet-bg: rgba(35, 37, 43, 0.9);
  --crm-surface-inset-bg: rgba(38, 40, 47, 0.86);
  --crm-surface-raised-bg: rgba(42, 44, 51, 0.94);
  --crm-surface-divider-bg: rgba(235, 235, 245, 0.15);
  --crm-surface-accent-bg: color-mix(in srgb, var(--crm-color-accent) 10%, var(--crm-color-surface-strong));
  --crm-action-danger-bg: rgba(120, 38, 43, 0.28);
  --crm-action-danger-bg-hover: rgba(143, 45, 51, 0.38);
  --crm-shadow-base: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 30px rgba(0, 0, 0, 0.26);
  --crm-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.24), 0 20px 48px rgba(0, 0, 0, 0.34);
  --crm-shadow-interactive: 0 1px 2px rgba(0, 0, 0, 0.22), 0 7px 18px rgba(0, 0, 0, 0.28);
  --crm-ambient-1: rgba(45, 70, 87, 0.18);
  --crm-ambient-2: rgba(82, 57, 38, 0.15);
  --crm-ambient-3: rgba(38, 75, 63, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root[data-crm-appearance="system"] {
    color-scheme: dark;
    --crm-color-ink: #f5f5f7;
    --crm-select-indicator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23dedee2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --crm-color-ink-soft: #dedee2;
    --crm-color-ink-muted: #a8a8ad;
    --crm-color-canvas: #111215;
    --crm-color-canvas-deep: #181a1f;
    --crm-color-surface: rgba(32, 34, 40, 0.9);
    --crm-color-surface-strong: #25272d;
    --crm-color-glass-base: rgba(23, 25, 30, 0.86);
    --crm-color-glass: rgba(35, 37, 43, 0.86);
    --crm-color-glass-elevated: rgba(42, 44, 51, 0.94);
    --crm-color-glass-dense: rgba(38, 40, 47, 0.98);
    --crm-color-glass-highlight: rgba(255, 255, 255, 0.08);
    --crm-color-glass-highlight-strong: rgba(255, 255, 255, 0.13);
    --crm-color-glass-shadow: rgba(0, 0, 0, 0.34);
    --crm-color-border: rgba(235, 235, 245, 0.14);
    --crm-color-border-strong: rgba(235, 235, 245, 0.22);
    --crm-control-border: rgba(235, 235, 245, 0.19);
    --crm-control-bg: rgba(40, 42, 49, 0.96);
    --crm-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 1px 2px rgba(0, 0, 0, 0.18);
    --crm-panel-bg: rgba(31, 33, 39, 0.96);
    --crm-subpanel-bg: rgba(38, 40, 47, 0.86);
    --crm-component-rule: rgba(235, 235, 245, 0.15);
    --crm-action-secondary-border: rgba(235, 235, 245, 0.18);
    --crm-action-secondary-bg: rgba(45, 47, 54, 0.96);
    --crm-action-secondary-bg-hover: rgba(55, 57, 65, 0.98);
    --crm-action-primary-bg: linear-gradient(180deg, #0b63b7, #064a8c);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #0c70cb, #07559d);
    --crm-color-success: #55c96f;
    --crm-color-success-soft: rgba(85, 201, 111, 0.15);
    --crm-color-warning: #e6ad45;
    --crm-color-warning-soft: rgba(230, 173, 69, 0.16);
    --crm-color-danger: #ff7878;
    --crm-color-danger-soft: rgba(255, 120, 120, 0.15);
    --crm-color-link: #72b7ff;
    --crm-color-link-hover: #9accff;
    --crm-color-focus: #77b9ff;
    --crm-operations-control-bg: rgba(40, 42, 49, 0.96);
    --crm-operations-rule: rgba(235, 235, 245, 0.15);
    --crm-operations-dense-bg: rgba(35, 37, 43, 0.9);
    --crm-surface-quiet-bg: rgba(35, 37, 43, 0.9);
    --crm-surface-inset-bg: rgba(38, 40, 47, 0.86);
    --crm-surface-raised-bg: rgba(42, 44, 51, 0.94);
    --crm-surface-divider-bg: rgba(235, 235, 245, 0.15);
    --crm-surface-accent-bg: color-mix(in srgb, var(--crm-color-accent) 10%, var(--crm-color-surface-strong));
    --crm-action-danger-bg: rgba(120, 38, 43, 0.28);
    --crm-action-danger-bg-hover: rgba(143, 45, 51, 0.38);
    --crm-shadow-base: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 30px rgba(0, 0, 0, 0.26);
    --crm-shadow-elevated: 0 2px 6px rgba(0, 0, 0, 0.24), 0 20px 48px rgba(0, 0, 0, 0.34);
    --crm-shadow-interactive: 0 1px 2px rgba(0, 0, 0, 0.22), 0 7px 18px rgba(0, 0, 0, 0.28);
    --crm-ambient-1: rgba(45, 70, 87, 0.18);
    --crm-ambient-2: rgba(82, 57, 38, 0.15);
    --crm-ambient-3: rgba(38, 75, 63, 0.16);
  }
}

/* Organization appearance changes only the product accent. Semantic success,
   warning and danger colors remain stable so their meaning never depends on
   the owner's palette. `--crm-color-blue*` are retained as legacy brand
   aliases until all domain modules use `--crm-color-accent*` directly. */
:root[data-crm-theme="red"] {
  --crm-print-accent: #c43e38;
  --crm-color-border-cool: rgba(190, 55, 50, 0.17);
  --crm-color-border-hot: rgba(190, 55, 50, 0.46);
  --crm-color-accent: #c43e38;
  --crm-color-accent-hover: #d14a43;
  --crm-color-accent-deep: #9e2b28;
  --crm-color-accent-soft: rgba(196, 62, 56, 0.1);
  --crm-color-blue: #b7433f;
  --crm-color-blue-soft: rgba(196, 62, 56, 0.12);
  --crm-color-focus: #ad302c;
  --crm-color-link: #a72f2b;
  --crm-color-link-hover: #8c2623;
  --crm-control-focus-border: rgba(196, 62, 56, 0.58);
  --crm-control-focus-ring: rgba(196, 62, 56, 0.2);
  --crm-action-primary-border: rgba(139, 32, 29, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #d95950, #b6312d);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #e16158, #c03732);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 18px rgba(164, 43, 38, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 9px 22px rgba(164, 43, 38, 0.24);
  --crm-brand-mark-bg: linear-gradient(145deg, #df6258, #b4312d);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 24px rgba(164, 43, 38, 0.2);
  --crm-ambient-1: rgba(247, 190, 180, 0.28);
  --crm-ambient-2: rgba(237, 183, 193, 0.3);
  --crm-ambient-3: rgba(235, 200, 180, 0.2);
  --crm-orb-a-core: rgba(210, 111, 105, 0.25);
  --crm-orb-a-start: rgba(255, 243, 242, 0.58);
  --crm-orb-a-end: rgba(222, 154, 150, 0.2);
  --crm-orb-b-core: rgba(218, 116, 97, 0.26);
  --crm-orb-b-start: rgba(255, 226, 217, 0.4);
  --crm-orb-b-end: rgba(213, 131, 112, 0.18);
  --crm-orb-c-core: rgba(185, 81, 94, 0.2);
  --crm-orb-c-start: rgba(242, 207, 211, 0.36);
  --crm-orb-c-end: rgba(176, 74, 88, 0.16);
}

:root[data-crm-theme="green"] {
  --crm-print-accent: #237b55;
  --crm-color-border-cool: rgba(31, 126, 87, 0.17);
  --crm-color-border-hot: rgba(31, 126, 87, 0.46);
  --crm-color-accent: #237b55;
  --crm-color-accent-hover: #2a8961;
  --crm-color-accent-deep: #175f40;
  --crm-color-accent-soft: rgba(35, 123, 85, 0.11);
  --crm-color-blue: #2f8060;
  --crm-color-blue-soft: rgba(35, 123, 85, 0.12);
  --crm-color-focus: #1b704c;
  --crm-color-link: #176b47;
  --crm-color-link-hover: #12583a;
  --crm-control-focus-border: rgba(35, 123, 85, 0.58);
  --crm-control-focus-ring: rgba(35, 123, 85, 0.2);
  --crm-action-primary-border: rgba(18, 91, 61, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #32966c, #1c704d);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #3ca378, #227b56);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 18px rgba(25, 104, 70, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 9px 22px rgba(25, 104, 70, 0.24);
  --crm-brand-mark-bg: linear-gradient(145deg, #3ba579, #1c704d);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 24px rgba(25, 104, 70, 0.2);
  --crm-ambient-1: rgba(205, 224, 190, 0.26);
  --crm-ambient-2: rgba(170, 215, 194, 0.3);
  --crm-ambient-3: rgba(152, 204, 178, 0.22);
  --crm-orb-a-core: rgba(105, 176, 143, 0.27);
  --crm-orb-a-start: rgba(239, 250, 245, 0.58);
  --crm-orb-a-end: rgba(145, 197, 173, 0.21);
  --crm-orb-b-core: rgba(142, 190, 124, 0.25);
  --crm-orb-b-start: rgba(232, 245, 222, 0.4);
  --crm-orb-b-end: rgba(130, 180, 113, 0.18);
  --crm-orb-c-core: rgba(51, 139, 99, 0.25);
  --crm-orb-c-start: rgba(190, 228, 209, 0.4);
  --crm-orb-c-end: rgba(48, 126, 91, 0.18);
}

:root[data-crm-theme="orange"] {
  --crm-print-accent: #b85408;
  --crm-color-border-cool: rgba(190, 86, 15, 0.18);
  --crm-color-border-hot: rgba(190, 86, 15, 0.47);
  --crm-color-accent: #b85408;
  --crm-color-accent-hover: #c7600f;
  --crm-color-accent-deep: #913e04;
  --crm-color-accent-soft: rgba(184, 84, 8, 0.11);
  --crm-color-blue: #b76322;
  --crm-color-blue-soft: rgba(184, 84, 8, 0.12);
  --crm-color-focus: #a34705;
  --crm-color-link: #9e4705;
  --crm-color-link-hover: #843a04;
  --crm-control-focus-border: rgba(184, 84, 8, 0.58);
  --crm-control-focus-ring: rgba(184, 84, 8, 0.2);
  --crm-action-primary-border: rgba(135, 55, 2, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #d66a16, #a94705);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #e4771f, #b85008);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 18px rgba(159, 68, 7, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 9px 22px rgba(159, 68, 7, 0.24);
  --crm-brand-mark-bg: linear-gradient(145deg, #e47a24, #ad4906);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 24px rgba(159, 68, 7, 0.2);
  --crm-ambient-1: rgba(247, 199, 149, 0.3);
  --crm-ambient-2: rgba(237, 188, 138, 0.27);
  --crm-ambient-3: rgba(225, 176, 126, 0.2);
  --crm-orb-a-core: rgba(220, 151, 86, 0.25);
  --crm-orb-a-start: rgba(255, 248, 239, 0.58);
  --crm-orb-a-end: rgba(229, 174, 119, 0.21);
  --crm-orb-b-core: rgba(230, 139, 55, 0.3);
  --crm-orb-b-start: rgba(255, 229, 197, 0.44);
  --crm-orb-b-end: rgba(218, 129, 45, 0.2);
  --crm-orb-c-core: rgba(186, 102, 28, 0.22);
  --crm-orb-c-start: rgba(244, 211, 177, 0.38);
  --crm-orb-c-end: rgba(173, 86, 17, 0.17);
}

:root[data-crm-theme="purple"] {
  --crm-print-accent: #6a4bc2;
  --crm-color-border-cool: rgba(105, 75, 190, 0.18);
  --crm-color-border-hot: rgba(105, 75, 190, 0.46);
  --crm-color-accent: #6a4bc2;
  --crm-color-accent-hover: #7758d0;
  --crm-color-accent-deep: #51379e;
  --crm-color-accent-soft: rgba(106, 75, 194, 0.1);
  --crm-color-blue: #7359bb;
  --crm-color-blue-soft: rgba(106, 75, 194, 0.12);
  --crm-color-focus: #5b3eb0;
  --crm-color-link: #5a3eaa;
  --crm-color-link-hover: #49328d;
  --crm-control-focus-border: rgba(106, 75, 194, 0.58);
  --crm-control-focus-ring: rgba(106, 75, 194, 0.2);
  --crm-action-primary-border: rgba(73, 47, 153, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #8266dc, #5b3eb0);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #8d72e5, #6548bb);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 7px 18px rgba(83, 58, 161, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 9px 22px rgba(83, 58, 161, 0.24);
  --crm-brand-mark-bg: linear-gradient(145deg, #9278e8, #5b3eb0);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 24px rgba(83, 58, 161, 0.2);
  --crm-ambient-1: rgba(221, 201, 244, 0.28);
  --crm-ambient-2: rgba(194, 187, 236, 0.3);
  --crm-ambient-3: rgba(210, 188, 232, 0.2);
  --crm-orb-a-core: rgba(145, 123, 207, 0.27);
  --crm-orb-a-start: rgba(248, 244, 255, 0.58);
  --crm-orb-a-end: rgba(175, 158, 220, 0.22);
  --crm-orb-b-core: rgba(186, 124, 205, 0.25);
  --crm-orb-b-start: rgba(246, 224, 252, 0.4);
  --crm-orb-b-end: rgba(171, 113, 193, 0.18);
  --crm-orb-c-core: rgba(105, 82, 177, 0.23);
  --crm-orb-c-start: rgba(218, 208, 244, 0.39);
  --crm-orb-c-end: rgba(92, 68, 160, 0.17);
}

:root[data-crm-theme="graphite"] {
  --crm-print-accent: #41454d;
  --crm-color-border-cool: rgba(58, 62, 70, 0.18);
  --crm-color-border-hot: rgba(58, 62, 70, 0.46);
  --crm-color-accent: #41454d;
  --crm-color-accent-hover: #50555e;
  --crm-color-accent-deep: #25282e;
  --crm-color-accent-soft: rgba(58, 62, 70, 0.1);
  --crm-color-blue: #555a63;
  --crm-color-blue-soft: rgba(58, 62, 70, 0.12);
  --crm-color-focus: #34383f;
  --crm-color-link: #3e424a;
  --crm-color-link-hover: #24272c;
  --crm-control-focus-border: rgba(58, 62, 70, 0.58);
  --crm-control-focus-ring: rgba(58, 62, 70, 0.18);
  --crm-action-primary-border: rgba(25, 27, 31, 0.32);
  --crm-action-primary-bg: linear-gradient(180deg, #585d66, #2d3036);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #646a74, #353940);
  --crm-action-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 7px 18px rgba(30, 33, 38, 0.2);
  --crm-action-primary-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 9px 22px rgba(30, 33, 38, 0.24);
  --crm-brand-mark-bg: linear-gradient(145deg, #666b75, #2d3036);
  --crm-brand-mark-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 24px rgba(30, 33, 38, 0.2);
  --crm-ambient-1: rgba(202, 203, 207, 0.22);
  --crm-ambient-2: rgba(183, 189, 198, 0.26);
  --crm-ambient-3: rgba(167, 172, 181, 0.2);
  --crm-orb-a-core: rgba(114, 122, 136, 0.25);
  --crm-orb-a-start: rgba(244, 245, 247, 0.56);
  --crm-orb-a-end: rgba(145, 151, 161, 0.2);
  --crm-orb-b-core: rgba(133, 126, 124, 0.22);
  --crm-orb-b-start: rgba(235, 232, 229, 0.38);
  --crm-orb-b-end: rgba(122, 115, 112, 0.17);
  --crm-orb-c-core: rgba(79, 85, 95, 0.22);
  --crm-orb-c-start: rgba(209, 213, 219, 0.36);
  --crm-orb-c-end: rgba(70, 75, 84, 0.16);
}

/* Palette selectors follow the base appearance selectors in source order.
   Their dark variants must therefore restore contrast-safe interactive
   colors explicitly instead of inheriting light-mode link/focus values. */
:root[data-crm-appearance="dark"][data-crm-theme="red"] {
  --crm-color-accent: #ef6c65;
  --crm-color-accent-hover: #ff7f77;
  --crm-color-accent-deep: #ffaaa3;
  --crm-color-blue: #ef817a;
  --crm-color-focus: #ff8c84;
  --crm-color-link: #ff9f98;
  --crm-color-link-hover: #ffc0bb;
  --crm-color-border-hot: rgba(255, 140, 132, 0.56);
  --crm-control-focus-border: rgba(255, 140, 132, 0.68);
  --crm-control-focus-ring: rgba(255, 140, 132, 0.3);
  --crm-action-primary-bg: linear-gradient(180deg, #b8423d, #8e2f2b);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #c84c46, #9d3530);
}

:root[data-crm-appearance="dark"][data-crm-theme="green"] {
  --crm-color-accent: #50b888;
  --crm-color-accent-hover: #60c998;
  --crm-color-accent-deep: #8ee0b7;
  --crm-color-blue: #67c99a;
  --crm-color-focus: #65d39f;
  --crm-color-link: #72d5a6;
  --crm-color-link-hover: #9ee6c3;
  --crm-color-border-hot: rgba(101, 211, 159, 0.52);
  --crm-control-focus-border: rgba(101, 211, 159, 0.66);
  --crm-control-focus-ring: rgba(101, 211, 159, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #257453, #15583d);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #2c8260, #1a6447);
}

:root[data-crm-appearance="dark"][data-crm-theme="orange"] {
  --crm-color-accent: #e17b2f;
  --crm-color-accent-hover: #f08c40;
  --crm-color-accent-deep: #ffc07e;
  --crm-color-blue: #f09550;
  --crm-color-focus: #ff9e52;
  --crm-color-link: #ffb166;
  --crm-color-link-hover: #ffd0a0;
  --crm-color-border-hot: rgba(255, 158, 82, 0.56);
  --crm-control-focus-border: rgba(255, 158, 82, 0.68);
  --crm-control-focus-ring: rgba(255, 158, 82, 0.3);
  --crm-action-primary-bg: linear-gradient(180deg, #9e4d13, #773506);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #ae591a, #873e09);
}

:root[data-crm-appearance="dark"][data-crm-theme="purple"] {
  --crm-color-accent: #9578e6;
  --crm-color-accent-hover: #a789f5;
  --crm-color-accent-deep: #c8b5ff;
  --crm-color-blue: #a58dea;
  --crm-color-focus: #aa91ff;
  --crm-color-link: #bba8ff;
  --crm-color-link-hover: #d7ccff;
  --crm-color-border-hot: rgba(170, 145, 255, 0.56);
  --crm-control-focus-border: rgba(170, 145, 255, 0.68);
  --crm-control-focus-ring: rgba(170, 145, 255, 0.3);
  --crm-action-primary-bg: linear-gradient(180deg, #684bb3, #49327f);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #7556c2, #55398f);
}

:root[data-crm-appearance="dark"][data-crm-theme="graphite"] {
  --crm-color-accent: #8f949e;
  --crm-color-accent-hover: #a2a7b0;
  --crm-color-accent-deep: #d7d9de;
  --crm-color-blue: #a7abb3;
  --crm-color-focus: #b8c3d6;
  --crm-color-link: #c7cad1;
  --crm-color-link-hover: #e3e4e8;
  --crm-color-border-hot: rgba(184, 195, 214, 0.52);
  --crm-control-focus-border: rgba(184, 195, 214, 0.66);
  --crm-control-focus-ring: rgba(184, 195, 214, 0.28);
  --crm-action-primary-bg: linear-gradient(180deg, #585d66, #2d3036);
  --crm-action-primary-bg-hover: linear-gradient(180deg, #646a74, #353940);
}

@media (prefers-color-scheme: dark) {
  :root[data-crm-appearance="system"][data-crm-theme="red"] {
    --crm-color-accent: #ef6c65;
    --crm-color-accent-hover: #ff7f77;
    --crm-color-accent-deep: #ffaaa3;
    --crm-color-blue: #ef817a;
    --crm-color-focus: #ff8c84;
    --crm-color-link: #ff9f98;
    --crm-color-link-hover: #ffc0bb;
    --crm-color-border-hot: rgba(255, 140, 132, 0.56);
    --crm-control-focus-border: rgba(255, 140, 132, 0.68);
    --crm-control-focus-ring: rgba(255, 140, 132, 0.3);
    --crm-action-primary-bg: linear-gradient(180deg, #b8423d, #8e2f2b);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #c84c46, #9d3530);
  }

  :root[data-crm-appearance="system"][data-crm-theme="green"] {
    --crm-color-accent: #50b888;
    --crm-color-accent-hover: #60c998;
    --crm-color-accent-deep: #8ee0b7;
    --crm-color-blue: #67c99a;
    --crm-color-focus: #65d39f;
    --crm-color-link: #72d5a6;
    --crm-color-link-hover: #9ee6c3;
    --crm-color-border-hot: rgba(101, 211, 159, 0.52);
    --crm-control-focus-border: rgba(101, 211, 159, 0.66);
    --crm-control-focus-ring: rgba(101, 211, 159, 0.28);
    --crm-action-primary-bg: linear-gradient(180deg, #257453, #15583d);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #2c8260, #1a6447);
  }

  :root[data-crm-appearance="system"][data-crm-theme="orange"] {
    --crm-color-accent: #e17b2f;
    --crm-color-accent-hover: #f08c40;
    --crm-color-accent-deep: #ffc07e;
    --crm-color-blue: #f09550;
    --crm-color-focus: #ff9e52;
    --crm-color-link: #ffb166;
    --crm-color-link-hover: #ffd0a0;
    --crm-color-border-hot: rgba(255, 158, 82, 0.56);
    --crm-control-focus-border: rgba(255, 158, 82, 0.68);
    --crm-control-focus-ring: rgba(255, 158, 82, 0.3);
    --crm-action-primary-bg: linear-gradient(180deg, #9e4d13, #773506);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #ae591a, #873e09);
  }

  :root[data-crm-appearance="system"][data-crm-theme="purple"] {
    --crm-color-accent: #9578e6;
    --crm-color-accent-hover: #a789f5;
    --crm-color-accent-deep: #c8b5ff;
    --crm-color-blue: #a58dea;
    --crm-color-focus: #aa91ff;
    --crm-color-link: #bba8ff;
    --crm-color-link-hover: #d7ccff;
    --crm-color-border-hot: rgba(170, 145, 255, 0.56);
    --crm-control-focus-border: rgba(170, 145, 255, 0.68);
    --crm-control-focus-ring: rgba(170, 145, 255, 0.3);
    --crm-action-primary-bg: linear-gradient(180deg, #684bb3, #49327f);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #7556c2, #55398f);
  }

  :root[data-crm-appearance="system"][data-crm-theme="graphite"] {
    --crm-color-accent: #8f949e;
    --crm-color-accent-hover: #a2a7b0;
    --crm-color-accent-deep: #d7d9de;
    --crm-color-blue: #a7abb3;
    --crm-color-focus: #b8c3d6;
    --crm-color-link: #c7cad1;
    --crm-color-link-hover: #e3e4e8;
    --crm-color-border-hot: rgba(184, 195, 214, 0.52);
    --crm-control-focus-border: rgba(184, 195, 214, 0.66);
    --crm-control-focus-ring: rgba(184, 195, 214, 0.28);
    --crm-action-primary-bg: linear-gradient(180deg, #585d66, #2d3036);
    --crm-action-primary-bg-hover: linear-gradient(180deg, #646a74, #353940);
  }
}

@media (max-width: 680px) {
  :root {
    --crm-blur-base: 16px;
    --crm-blur-elevated: 22px;
    --crm-blur-dense: 10px;
  }
}

@media (max-width: 560px) {
  :root {
    --crm-mobile-edge: clamp(8px, 0.62rem, 14px);
    --crm-mobile-dock-height: clamp(64px, 4.35rem, 80px);
    --crm-type-page-adaptive: clamp(1.25rem, 1rem + 3vw, 2.5rem);
    --crm-component-inset: 1rem;
  }
}

@media (prefers-contrast: more) {
  :root {
    --crm-color-ink-soft: #35494f;
    --crm-color-ink-muted: #405359;
    --crm-color-border: rgba(64, 83, 89, 0.52);
  }
}

}