/* ============================================
   OBM Admin - Design Tokens
   Loaded on every CRM page including the editor.
   Referenced by both crm.css and editor.css.
   ============================================ */

:root {
    --crm-heading-weight: 400;
    --crm-icon-stroke-width: 1.5;
    --crm-sidebar-width:  230px;
    --crm-topbar-height:  56px;

    /* Shared admin roles. See docs/architecture/admin-ui-ux.md. */
    --crm-colour-text-secondary: hsl(214 24% 80%);
    --crm-colour-text-disabled: hsl(214 12% 58%);
    --crm-colour-on-action: hsl(213 50% 6%);
    --crm-colour-surface-subtle: var(--crm-alpha-white-3);
    --crm-colour-control: var(--crm-alpha-white-4);
    --crm-colour-control-hover: var(--crm-alpha-white-8);
    --crm-control-colour-scheme: dark;
    --crm-colour-control-autofill: rgb(18, 24, 32);
    --crm-colour-selected: var(--crm-alpha-primary-12);
    --crm-colour-focus: var(--crm-colour-primary);
    --crm-colour-primary-active: hsl(167 100% 34%);
    --crm-space-1: 4px;
    --crm-space-2: 8px;
    --crm-space-3: 12px;
    --crm-space-4: 16px;
    --crm-space-6: 24px;
    --crm-space-8: 32px;
    --crm-space-12: 48px;
    --crm-width-compact: 640px;
    --crm-width-wide: 900px;
    --crm-control-height: 40px;
    --crm-control-height-small: 32px;
    --crm-radius-panel: 8px;

    /* Core colours */
    --crm-colour-transparent:    transparent;
    --crm-colour-white:          hsl(0 0% 100%);
    --crm-colour-black:          hsl(0 0% 0%);
    --crm-colour-bg:             hsl(213 50% 6%);
    --crm-colour-surface:        hsl(213 40% 18%);
    --crm-colour-surface-raised: hsl(210 50% 13%);
    --crm-colour-sidebar:        hsl(214 57% 5%);
    --crm-colour-text:           hsl(216 33% 90%);
    --crm-colour-text-muted:     hsl(214 18% 70%);

    /* Accent colours */
    --crm-colour-primary:        hsl(167 100% 39%);
    --crm-colour-primary-hover:  hsl(167 100% 45%);
    --crm-colour-secondary:      hsl(197 89% 48%);
    --crm-colour-secondary-hover:hsl(199 93% 60%);
    --crm-colour-success-tint:   hsl(168 71% 67%);
    --crm-colour-success-strong: hsl(167 80% 78%);
    --crm-colour-info:           hsl(217 91% 68%);
    --crm-colour-info-tint:      hsl(214 95% 93%);
    --crm-colour-warning:        hsl(45 97% 64%);
    --crm-colour-warning-accent: hsl(38 92% 50%);
    --crm-colour-error:          hsl(0 91% 71%);
    --crm-colour-error-soft:     hsl(0 93% 81%);
    --crm-colour-nav-active:     hsl(169 100% 42%);

    /* Preview colours */
    --crm-preview-paper:         hsl(40 34% 86%);
    --crm-preview-slate-950:     hsl(216 49% 8%);
    --crm-preview-slate-50:      hsl(210 40% 98%);
    --crm-preview-gold:          hsl(40 34% 74%);
    --crm-preview-ink:           hsl(180 19% 18%);
    --crm-preview-moss:          hsl(79 16% 48%);
    --crm-preview-deep:          hsl(180 20% 21%);

    /* Backgrounds */
    --crm-gradient-app:          linear-gradient(
        160deg,
        hsl(214 52% 7%) 0%,
        hsl(212 54% 5%) 55%,
        hsl(160 40% 4%) 100%
    );
    --crm-colour-layer-login:    hsl(211 51% 10% / 90%);
    --crm-colour-layer-autocomplete: hsl(213 49% 8% / 98%);
    --crm-colour-layer-tooltip:  hsl(214 55% 6% / 96%);
    --crm-colour-layer-dialog:   hsl(214 50% 6% / 98%);
    --crm-colour-layer-sheet:    hsl(214 46% 8% / 98%);
    --crm-colour-overlay-panel:  hsl(212 37% 15% / 48%);
    --crm-colour-overlay-backdrop: var(--crm-alpha-black-72);
    --crm-colour-overlay-backdrop-soft: hsl(213 80% 4% / 72%);

    /* Shared semantic helpers */
    --crm-colour-border:         var(--crm-alpha-white-8);
    --crm-colour-border-strong:  hsl(214 16% 46%);
    --crm-colour-nav-hover:      var(--crm-alpha-white-5);
    --crm-colour-nav-active-bg:  var(--crm-alpha-nav-active-10);
    --crm-colour-error-bg:       var(--crm-alpha-error-10);

    /* Alpha colour fallbacks for Safari/iOS Safari 15.8. */
    --crm-alpha-bg-3: rgba(8, 15, 23, 0.03);
    --crm-alpha-bg-65: rgba(8, 15, 23, 0.65);
    --crm-alpha-bg-72: rgba(8, 15, 23, 0.72);
    --crm-alpha-bg-78: rgba(8, 15, 23, 0.78);
    --crm-alpha-bg-82: rgba(8, 15, 23, 0.82);
    --crm-alpha-black-8: rgba(0, 0, 0, 0.08);
    --crm-alpha-black-10: rgba(0, 0, 0, 0.1);
    --crm-alpha-black-18: rgba(0, 0, 0, 0.18);
    --crm-alpha-black-24: rgba(0, 0, 0, 0.24);
    --crm-alpha-black-25: rgba(0, 0, 0, 0.25);
    --crm-alpha-black-28: rgba(0, 0, 0, 0.28);
    --crm-alpha-black-30: rgba(0, 0, 0, 0.3);
    --crm-alpha-black-34: rgba(0, 0, 0, 0.34);
    --crm-alpha-black-35: rgba(0, 0, 0, 0.35);
    --crm-alpha-black-36: rgba(0, 0, 0, 0.36);
    --crm-alpha-black-42: rgba(0, 0, 0, 0.42);
    --crm-alpha-black-45: rgba(0, 0, 0, 0.45);
    --crm-alpha-black-55: rgba(0, 0, 0, 0.55);
    --crm-alpha-black-60: rgba(0, 0, 0, 0.6);
    --crm-alpha-black-70: rgba(0, 0, 0, 0.7);
    --crm-alpha-black-72: rgba(0, 0, 0, 0.72);
    --crm-alpha-error-8: rgba(248, 114, 114, 0.08);
    --crm-alpha-error-10: rgba(248, 114, 114, 0.1);
    --crm-alpha-error-12: rgba(248, 114, 114, 0.12);
    --crm-alpha-error-20: rgba(248, 114, 114, 0.2);
    --crm-alpha-error-25: rgba(248, 114, 114, 0.25);
    --crm-alpha-error-28: rgba(248, 114, 114, 0.28);
    --crm-alpha-error-30: rgba(248, 114, 114, 0.3);
    --crm-alpha-error-32: rgba(248, 114, 114, 0.32);
    --crm-alpha-error-35: rgba(248, 114, 114, 0.35);
    --crm-alpha-error-40: rgba(248, 114, 114, 0.4);
    --crm-alpha-error-45: rgba(248, 114, 114, 0.45);
    --crm-alpha-error-55: rgba(248, 114, 114, 0.55);
    --crm-alpha-error-60: rgba(248, 114, 114, 0.6);
    --crm-alpha-error-65: rgba(248, 114, 114, 0.65);
    --crm-alpha-info-7: rgba(96, 151, 247, 0.07);
    --crm-alpha-info-9: rgba(96, 151, 247, 0.09);
    --crm-alpha-info-10: rgba(96, 151, 247, 0.1);
    --crm-alpha-nav-active-10: rgba(0, 214, 175, 0.1);
    --crm-alpha-primary-4: rgba(0, 199, 156, 0.04);
    --crm-alpha-primary-6: rgba(0, 199, 156, 0.06);
    --crm-alpha-primary-7: rgba(0, 199, 156, 0.07);
    --crm-alpha-primary-8: rgba(0, 199, 156, 0.08);
    --crm-alpha-primary-9: rgba(0, 199, 156, 0.09);
    --crm-alpha-primary-10: rgba(0, 199, 156, 0.1);
    --crm-alpha-primary-12: rgba(0, 199, 156, 0.12);
    --crm-alpha-primary-13: rgba(0, 199, 156, 0.13);
    --crm-alpha-primary-14: rgba(0, 199, 156, 0.14);
    --crm-alpha-primary-15: rgba(0, 199, 156, 0.15);
    --crm-alpha-primary-16: rgba(0, 199, 156, 0.16);
    --crm-alpha-primary-18: rgba(0, 199, 156, 0.18);
    --crm-alpha-primary-20: rgba(0, 199, 156, 0.2);
    --crm-alpha-primary-24: rgba(0, 199, 156, 0.24);
    --crm-alpha-primary-25: rgba(0, 199, 156, 0.25);
    --crm-alpha-primary-28: rgba(0, 199, 156, 0.28);
    --crm-alpha-primary-30: rgba(0, 199, 156, 0.3);
    --crm-alpha-primary-32: rgba(0, 199, 156, 0.32);
    --crm-alpha-primary-36: rgba(0, 199, 156, 0.36);
    --crm-alpha-primary-38: rgba(0, 199, 156, 0.38);
    --crm-alpha-primary-40: rgba(0, 199, 156, 0.4);
    --crm-alpha-primary-42: rgba(0, 199, 156, 0.42);
    --crm-alpha-primary-45: rgba(0, 199, 156, 0.45);
    --crm-alpha-primary-50: rgba(0, 199, 156, 0.5);
    --crm-alpha-primary-55: rgba(0, 199, 156, 0.55);
    --crm-alpha-primary-60: rgba(0, 199, 156, 0.6);
    --crm-alpha-primary-70: rgba(0, 199, 156, 0.7);
    --crm-alpha-primary-92: rgba(0, 199, 156, 0.92);
    --crm-alpha-secondary-8: rgba(13, 166, 231, 0.08);
    --crm-alpha-secondary-24: rgba(13, 166, 231, 0.24);
    --crm-alpha-surface-96: rgba(28, 45, 64, 0.96);
    --crm-alpha-warning-12: rgba(252, 207, 75, 0.12);
    --crm-alpha-warning-24: rgba(252, 207, 75, 0.24);
    --crm-alpha-warning-accent-0: rgba(245, 158, 10, 0);
    --crm-alpha-warning-accent-8: rgba(245, 158, 10, 0.08);
    --crm-alpha-warning-accent-12: rgba(245, 158, 10, 0.12);
    --crm-alpha-warning-accent-16: rgba(245, 158, 10, 0.16);
    --crm-alpha-warning-accent-18: rgba(245, 158, 10, 0.18);
    --crm-alpha-warning-accent-22: rgba(245, 158, 10, 0.22);
    --crm-alpha-warning-accent-24: rgba(245, 158, 10, 0.24);
    --crm-alpha-warning-accent-28: rgba(245, 158, 10, 0.28);
    --crm-alpha-warning-accent-32: rgba(245, 158, 10, 0.32);
    --crm-alpha-warning-accent-35: rgba(245, 158, 10, 0.35);
    --crm-alpha-white-2: rgba(255, 255, 255, 0.02);
    --crm-alpha-white-2-5: rgba(255, 255, 255, 0.025);
    --crm-alpha-white-3: rgba(255, 255, 255, 0.03);
    --crm-alpha-white-4: rgba(255, 255, 255, 0.04);
    --crm-alpha-white-5: rgba(255, 255, 255, 0.05);
    --crm-alpha-white-6: rgba(255, 255, 255, 0.06);
    --crm-alpha-white-7: rgba(255, 255, 255, 0.07);
    --crm-alpha-white-8: rgba(255, 255, 255, 0.08);
    --crm-alpha-white-9: rgba(255, 255, 255, 0.09);
    --crm-alpha-white-10: rgba(255, 255, 255, 0.1);
    --crm-alpha-white-12: rgba(255, 255, 255, 0.12);
    --crm-alpha-white-14: rgba(255, 255, 255, 0.14);
    --crm-alpha-white-16: rgba(255, 255, 255, 0.16);
    --crm-alpha-white-20: rgba(255, 255, 255, 0.2);
    --crm-alpha-white-22: rgba(255, 255, 255, 0.22);
    --crm-alpha-white-24: rgba(255, 255, 255, 0.24);
    --crm-alpha-white-25: rgba(255, 255, 255, 0.25);
    --crm-alpha-white-26: rgba(255, 255, 255, 0.26);
    --crm-alpha-white-30: rgba(255, 255, 255, 0.3);
    --crm-alpha-white-35: rgba(255, 255, 255, 0.35);
    --crm-alpha-white-36: rgba(255, 255, 255, 0.36);
    --crm-alpha-white-42: rgba(255, 255, 255, 0.42);
    --crm-alpha-white-45: rgba(255, 255, 255, 0.45);
    --crm-alpha-white-50: rgba(255, 255, 255, 0.5);
    --crm-alpha-white-52: rgba(255, 255, 255, 0.52);
    --crm-alpha-white-70: rgba(255, 255, 255, 0.7);
    --crm-alpha-white-72: rgba(255, 255, 255, 0.72);
    --crm-alpha-white-74: rgba(255, 255, 255, 0.74);
    --crm-alpha-white-78: rgba(255, 255, 255, 0.78);
    --crm-alpha-white-82: rgba(255, 255, 255, 0.82);
    --crm-alpha-white-90: rgba(255, 255, 255, 0.9);
    --crm-alpha-white-92: rgba(255, 255, 255, 0.92);
    --crm-alpha-white-94: rgba(255, 255, 255, 0.94);
    --crm-alpha-gift-card-background-42: rgba(255, 255, 255, 0.42);
    --crm-alpha-gift-card-foreground-34: rgba(0, 0, 0, 0.34);
    --crm-alpha-gift-card-foreground-42: rgba(0, 0, 0, 0.42);
    --crm-alpha-gift-card-foreground-68: rgba(0, 0, 0, 0.68);
    --crm-alpha-gift-card-foreground-74: rgba(0, 0, 0, 0.74);
    --crm-alpha-gift-card-foreground-76: rgba(0, 0, 0, 0.76);
    --crm-alpha-gift-card-foreground-84: rgba(0, 0, 0, 0.84);
    --crm-alpha-gift-card-foreground-86: rgba(0, 0, 0, 0.86);
    --crm-alpha-preview-deep-18: rgba(43, 64, 64, 0.18);
    --crm-alpha-preview-ink-7: rgba(37, 55, 55, 0.07);
    --crm-alpha-preview-ink-8: rgba(37, 55, 55, 0.08);
    --crm-alpha-preview-ink-12: rgba(37, 55, 55, 0.12);
    --crm-alpha-preview-ink-14: rgba(37, 55, 55, 0.14);
    --crm-alpha-preview-ink-18: rgba(37, 55, 55, 0.18);
    --crm-alpha-preview-ink-60: rgba(37, 55, 55, 0.6);
    --crm-alpha-preview-ink-62: rgba(37, 55, 55, 0.62);
    --crm-alpha-preview-ink-72: rgba(37, 55, 55, 0.72);
    --crm-alpha-preview-ink-80: rgba(37, 55, 55, 0.8);
    --crm-alpha-preview-ink-88: rgba(37, 55, 55, 0.88);
    --crm-alpha-preview-moss-22: rgba(129, 142, 103, 0.22);
    --crm-alpha-preview-paper-88: rgba(229, 222, 210, 0.88);
    --crm-alpha-preview-paper-96: rgba(229, 222, 210, 0.96);
    --crm-alpha-main-border-subtle-18: rgba(255, 255, 255, 0.18);
    --crm-alpha-main-shadow-colour-16: rgba(0, 0, 0, 0.16);
    --crm-alpha-main-text-colour-72: rgba(0, 0, 0, 0.72);
    --crm-alpha-editor-chrome-8: rgba(0, 199, 156, 0.08);
    --crm-alpha-editor-chrome-12: rgba(0, 199, 156, 0.12);
    --crm-alpha-editor-chrome-13: rgba(0, 199, 156, 0.13);
    --crm-alpha-editor-chrome-14: rgba(0, 199, 156, 0.14);
    --crm-alpha-editor-chrome-16: rgba(0, 199, 156, 0.16);
    --crm-alpha-editor-chrome-18: rgba(0, 199, 156, 0.18);
    --crm-alpha-editor-chrome-20: rgba(0, 199, 156, 0.2);
    --crm-alpha-editor-chrome-24: rgba(0, 199, 156, 0.24);
    --crm-alpha-editor-chrome-26: rgba(0, 199, 156, 0.26);
    --crm-alpha-editor-chrome-40: rgba(0, 199, 156, 0.4);
    --crm-alpha-editor-chrome-45: rgba(0, 199, 156, 0.45);
    --crm-alpha-editor-chrome-50: rgba(0, 199, 156, 0.5);
    --crm-alpha-editor-chrome-55: rgba(0, 199, 156, 0.55);
    --crm-alpha-editor-chrome-62: rgba(0, 199, 156, 0.62);

    --crm-gradient-primary:      linear-gradient(135deg, var(--crm-colour-primary) 0%, var(--crm-colour-secondary) 100%);
    --crm-gradient-primary-hover:linear-gradient(135deg, var(--crm-colour-primary-hover) 0%, var(--crm-colour-secondary-hover) 100%);
    --crm-glow-primary:          0 0 20px var(--crm-alpha-primary-28);
    --crm-glow-primary-hover:    0 0 32px var(--crm-alpha-primary-42);

    --crm-preview-hero-background:
        radial-gradient(circle at 20% 20%, var(--crm-alpha-preview-moss-22), transparent 28%),
        linear-gradient(135deg, var(--crm-alpha-preview-deep-18), var(--crm-alpha-white-10)),
        var(--crm-preview-gold);

    --crm-radius:    6px;
    --crm-shadow-sm: 0 1px 4px var(--crm-alpha-black-30);
    --crm-shadow-md: 0 8px 32px var(--crm-alpha-black-45);

    --crm-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --crm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Overlay layering. Full-screen modals (Publish, Media Library) share one
       tier since they never open on top of each other; blocking confirm/alert
       dialogs sit above so they can appear over any of them mid-flow. */
    --crm-z-page-modal: 1000;
    --crm-z-dialog:     1200;
    --crm-z-notifications: 1300;
}

@supports (color: hsl(from white h s l / 50%)) {
    :root {
        --crm-alpha-bg-3: hsl(from var(--crm-colour-bg) h s l / 3%);
        --crm-alpha-bg-65: hsl(from var(--crm-colour-bg) h s l / 65%);
        --crm-alpha-bg-72: hsl(from var(--crm-colour-bg) h s l / 72%);
        --crm-alpha-bg-78: hsl(from var(--crm-colour-bg) h s l / 78%);
        --crm-alpha-bg-82: hsl(from var(--crm-colour-bg) h s l / 82%);
        --crm-alpha-black-8: hsl(from var(--crm-colour-black) h s l / 8%);
        --crm-alpha-black-10: hsl(from var(--crm-colour-black) h s l / 10%);
        --crm-alpha-black-18: hsl(from var(--crm-colour-black) h s l / 18%);
        --crm-alpha-black-24: hsl(from var(--crm-colour-black) h s l / 24%);
        --crm-alpha-black-25: hsl(from var(--crm-colour-black) h s l / 25%);
        --crm-alpha-black-28: hsl(from var(--crm-colour-black) h s l / 28%);
        --crm-alpha-black-30: hsl(from var(--crm-colour-black) h s l / 30%);
        --crm-alpha-black-34: hsl(from var(--crm-colour-black) h s l / 34%);
        --crm-alpha-black-35: hsl(from var(--crm-colour-black) h s l / 35%);
        --crm-alpha-black-36: hsl(from var(--crm-colour-black) h s l / 36%);
        --crm-alpha-black-42: hsl(from var(--crm-colour-black) h s l / 42%);
        --crm-alpha-black-45: hsl(from var(--crm-colour-black) h s l / 45%);
        --crm-alpha-black-55: hsl(from var(--crm-colour-black) h s l / 55%);
        --crm-alpha-black-60: hsl(from var(--crm-colour-black) h s l / 60%);
        --crm-alpha-black-70: hsl(from var(--crm-colour-black) h s l / 70%);
        --crm-alpha-black-72: hsl(from var(--crm-colour-black) h s l / 72%);
        --crm-alpha-error-8: hsl(from var(--crm-colour-error) h s l / 8%);
        --crm-alpha-error-10: hsl(from var(--crm-colour-error) h s l / 10%);
        --crm-alpha-error-12: hsl(from var(--crm-colour-error) h s l / 12%);
        --crm-alpha-error-20: hsl(from var(--crm-colour-error) h s l / 20%);
        --crm-alpha-error-25: hsl(from var(--crm-colour-error) h s l / 25%);
        --crm-alpha-error-28: hsl(from var(--crm-colour-error) h s l / 28%);
        --crm-alpha-error-30: hsl(from var(--crm-colour-error) h s l / 30%);
        --crm-alpha-error-32: hsl(from var(--crm-colour-error) h s l / 32%);
        --crm-alpha-error-35: hsl(from var(--crm-colour-error) h s l / 35%);
        --crm-alpha-error-40: hsl(from var(--crm-colour-error) h s l / 40%);
        --crm-alpha-error-45: hsl(from var(--crm-colour-error) h s l / 45%);
        --crm-alpha-error-55: hsl(from var(--crm-colour-error) h s l / 55%);
        --crm-alpha-error-60: hsl(from var(--crm-colour-error) h s l / 60%);
        --crm-alpha-error-65: hsl(from var(--crm-colour-error) h s l / 65%);
        --crm-alpha-info-7: hsl(from var(--crm-colour-info) h s l / 7%);
        --crm-alpha-info-9: hsl(from var(--crm-colour-info) h s l / 9%);
        --crm-alpha-info-10: hsl(from var(--crm-colour-info) h s l / 10%);
        --crm-alpha-nav-active-10: hsl(from var(--crm-colour-nav-active) h s l / 10%);
        --crm-alpha-primary-4: hsl(from var(--crm-colour-primary) h s l / 4%);
        --crm-alpha-primary-6: hsl(from var(--crm-colour-primary) h s l / 6%);
        --crm-alpha-primary-7: hsl(from var(--crm-colour-primary) h s l / 7%);
        --crm-alpha-primary-8: hsl(from var(--crm-colour-primary) h s l / 8%);
        --crm-alpha-primary-9: hsl(from var(--crm-colour-primary) h s l / 9%);
        --crm-alpha-primary-10: hsl(from var(--crm-colour-primary) h s l / 10%);
        --crm-alpha-primary-12: hsl(from var(--crm-colour-primary) h s l / 12%);
        --crm-alpha-primary-13: hsl(from var(--crm-colour-primary) h s l / 13%);
        --crm-alpha-primary-14: hsl(from var(--crm-colour-primary) h s l / 14%);
        --crm-alpha-primary-15: hsl(from var(--crm-colour-primary) h s l / 15%);
        --crm-alpha-primary-16: hsl(from var(--crm-colour-primary) h s l / 16%);
        --crm-alpha-primary-18: hsl(from var(--crm-colour-primary) h s l / 18%);
        --crm-alpha-primary-20: hsl(from var(--crm-colour-primary) h s l / 20%);
        --crm-alpha-primary-24: hsl(from var(--crm-colour-primary) h s l / 24%);
        --crm-alpha-primary-25: hsl(from var(--crm-colour-primary) h s l / 25%);
        --crm-alpha-primary-28: hsl(from var(--crm-colour-primary) h s l / 28%);
        --crm-alpha-primary-30: hsl(from var(--crm-colour-primary) h s l / 30%);
        --crm-alpha-primary-32: hsl(from var(--crm-colour-primary) h s l / 32%);
        --crm-alpha-primary-36: hsl(from var(--crm-colour-primary) h s l / 36%);
        --crm-alpha-primary-38: hsl(from var(--crm-colour-primary) h s l / 38%);
        --crm-alpha-primary-40: hsl(from var(--crm-colour-primary) h s l / 40%);
        --crm-alpha-primary-42: hsl(from var(--crm-colour-primary) h s l / 42%);
        --crm-alpha-primary-45: hsl(from var(--crm-colour-primary) h s l / 45%);
        --crm-alpha-primary-50: hsl(from var(--crm-colour-primary) h s l / 50%);
        --crm-alpha-primary-55: hsl(from var(--crm-colour-primary) h s l / 55%);
        --crm-alpha-primary-60: hsl(from var(--crm-colour-primary) h s l / 60%);
        --crm-alpha-primary-70: hsl(from var(--crm-colour-primary) h s l / 70%);
        --crm-alpha-primary-92: hsl(from var(--crm-colour-primary) h s l / 92%);
        --crm-alpha-secondary-8: hsl(from var(--crm-colour-secondary) h s l / 8%);
        --crm-alpha-secondary-24: hsl(from var(--crm-colour-secondary) h s l / 24%);
        --crm-alpha-surface-96: hsl(from var(--crm-colour-surface) h s l / 96%);
        --crm-alpha-warning-12: hsl(from var(--crm-colour-warning) h s l / 12%);
        --crm-alpha-warning-24: hsl(from var(--crm-colour-warning) h s l / 24%);
        --crm-alpha-warning-accent-0: hsl(from var(--crm-colour-warning-accent) h s l / 0%);
        --crm-alpha-warning-accent-8: hsl(from var(--crm-colour-warning-accent) h s l / 8%);
        --crm-alpha-warning-accent-12: hsl(from var(--crm-colour-warning-accent) h s l / 12%);
        --crm-alpha-warning-accent-16: hsl(from var(--crm-colour-warning-accent) h s l / 16%);
        --crm-alpha-warning-accent-18: hsl(from var(--crm-colour-warning-accent) h s l / 18%);
        --crm-alpha-warning-accent-22: hsl(from var(--crm-colour-warning-accent) h s l / 22%);
        --crm-alpha-warning-accent-24: hsl(from var(--crm-colour-warning-accent) h s l / 24%);
        --crm-alpha-warning-accent-28: hsl(from var(--crm-colour-warning-accent) h s l / 28%);
        --crm-alpha-warning-accent-32: hsl(from var(--crm-colour-warning-accent) h s l / 32%);
        --crm-alpha-warning-accent-35: hsl(from var(--crm-colour-warning-accent) h s l / 35%);
        --crm-alpha-white-2: hsl(from var(--crm-colour-white) h s l / 2%);
        --crm-alpha-white-2-5: hsl(from var(--crm-colour-white) h s l / 2.5%);
        --crm-alpha-white-3: hsl(from var(--crm-colour-white) h s l / 3%);
        --crm-alpha-white-4: hsl(from var(--crm-colour-white) h s l / 4%);
        --crm-alpha-white-5: hsl(from var(--crm-colour-white) h s l / 5%);
        --crm-alpha-white-6: hsl(from var(--crm-colour-white) h s l / 6%);
        --crm-alpha-white-7: hsl(from var(--crm-colour-white) h s l / 7%);
        --crm-alpha-white-8: hsl(from var(--crm-colour-white) h s l / 8%);
        --crm-alpha-white-9: hsl(from var(--crm-colour-white) h s l / 9%);
        --crm-alpha-white-10: hsl(from var(--crm-colour-white) h s l / 10%);
        --crm-alpha-white-12: hsl(from var(--crm-colour-white) h s l / 12%);
        --crm-alpha-white-14: hsl(from var(--crm-colour-white) h s l / 14%);
        --crm-alpha-white-16: hsl(from var(--crm-colour-white) h s l / 16%);
        --crm-alpha-white-20: hsl(from var(--crm-colour-white) h s l / 20%);
        --crm-alpha-white-22: hsl(from var(--crm-colour-white) h s l / 22%);
        --crm-alpha-white-24: hsl(from var(--crm-colour-white) h s l / 24%);
        --crm-alpha-white-25: hsl(from var(--crm-colour-white) h s l / 25%);
        --crm-alpha-white-26: hsl(from var(--crm-colour-white) h s l / 26%);
        --crm-alpha-white-30: hsl(from var(--crm-colour-white) h s l / 30%);
        --crm-alpha-white-35: hsl(from var(--crm-colour-white) h s l / 35%);
        --crm-alpha-white-36: hsl(from var(--crm-colour-white) h s l / 36%);
        --crm-alpha-white-42: hsl(from var(--crm-colour-white) h s l / 42%);
        --crm-alpha-white-45: hsl(from var(--crm-colour-white) h s l / 45%);
        --crm-alpha-white-50: hsl(from var(--crm-colour-white) h s l / 50%);
        --crm-alpha-white-52: hsl(from var(--crm-colour-white) h s l / 52%);
        --crm-alpha-white-70: hsl(from var(--crm-colour-white) h s l / 70%);
        --crm-alpha-white-72: hsl(from var(--crm-colour-white) h s l / 72%);
        --crm-alpha-white-74: hsl(from var(--crm-colour-white) h s l / 74%);
        --crm-alpha-white-78: hsl(from var(--crm-colour-white) h s l / 78%);
        --crm-alpha-white-82: hsl(from var(--crm-colour-white) h s l / 82%);
        --crm-alpha-white-90: hsl(from var(--crm-colour-white) h s l / 90%);
        --crm-alpha-white-92: hsl(from var(--crm-colour-white) h s l / 92%);
        --crm-alpha-white-94: hsl(from var(--crm-colour-white) h s l / 94%);
        --crm-alpha-gift-card-background-42: color-mix(in srgb, var(--crm-gift-card-background, rgb(255 255 255)) 42%, transparent);
        --crm-alpha-gift-card-foreground-34: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 34%, transparent);
        --crm-alpha-gift-card-foreground-42: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 42%, transparent);
        --crm-alpha-gift-card-foreground-68: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 68%, transparent);
        --crm-alpha-gift-card-foreground-74: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 74%, transparent);
        --crm-alpha-gift-card-foreground-76: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 76%, transparent);
        --crm-alpha-gift-card-foreground-84: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 84%, transparent);
        --crm-alpha-gift-card-foreground-86: color-mix(in srgb, var(--crm-gift-card-foreground, rgb(0 0 0)) 86%, transparent);
        --crm-alpha-preview-deep-18: hsl(from var(--crm-preview-deep) h s l / 18%);
        --crm-alpha-preview-ink-7: hsl(from var(--crm-preview-ink) h s l / 7%);
        --crm-alpha-preview-ink-8: hsl(from var(--crm-preview-ink) h s l / 8%);
        --crm-alpha-preview-ink-12: hsl(from var(--crm-preview-ink) h s l / 12%);
        --crm-alpha-preview-ink-14: hsl(from var(--crm-preview-ink) h s l / 14%);
        --crm-alpha-preview-ink-18: hsl(from var(--crm-preview-ink) h s l / 18%);
        --crm-alpha-preview-ink-60: hsl(from var(--crm-preview-ink) h s l / 60%);
        --crm-alpha-preview-ink-62: hsl(from var(--crm-preview-ink) h s l / 62%);
        --crm-alpha-preview-ink-72: hsl(from var(--crm-preview-ink) h s l / 72%);
        --crm-alpha-preview-ink-80: hsl(from var(--crm-preview-ink) h s l / 80%);
        --crm-alpha-preview-ink-88: hsl(from var(--crm-preview-ink) h s l / 88%);
        --crm-alpha-preview-moss-22: hsl(from var(--crm-preview-moss) h s l / 22%);
        --crm-alpha-preview-paper-88: hsl(from var(--crm-preview-paper) h s l / 88%);
        --crm-alpha-preview-paper-96: hsl(from var(--crm-preview-paper) h s l / 96%);
        --crm-alpha-main-border-subtle-18: color-mix(in srgb, var(--main-border-subtle, var(--crm-colour-white)) 18%, transparent);
        --crm-alpha-main-shadow-colour-16: color-mix(in srgb, var(--main-shadow-colour, var(--crm-colour-black)) 16%, transparent);
        --crm-alpha-main-text-colour-72: color-mix(in srgb, var(--main-text-colour, var(--crm-colour-black)) 72%, transparent);
        --crm-alpha-editor-chrome-8: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 8%, transparent);
        --crm-alpha-editor-chrome-12: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 12%, transparent);
        --crm-alpha-editor-chrome-13: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 13%, transparent);
        --crm-alpha-editor-chrome-14: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 14%, transparent);
        --crm-alpha-editor-chrome-16: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 16%, transparent);
        --crm-alpha-editor-chrome-18: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 18%, transparent);
        --crm-alpha-editor-chrome-20: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 20%, transparent);
        --crm-alpha-editor-chrome-24: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 24%, transparent);
        --crm-alpha-editor-chrome-26: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 26%, transparent);
        --crm-alpha-editor-chrome-40: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 40%, transparent);
        --crm-alpha-editor-chrome-45: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 45%, transparent);
        --crm-alpha-editor-chrome-50: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 50%, transparent);
        --crm-alpha-editor-chrome-55: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 55%, transparent);
        --crm-alpha-editor-chrome-62: color-mix(in srgb, var(--editor-chrome-colour, var(--crm-colour-primary)) 62%, transparent);
    }
}

@supports (color: color-mix(in srgb, white, black)) {
    :root {
        --crm-colour-control-autofill: color-mix(in srgb, var(--crm-colour-white) 4%, var(--crm-colour-bg));
    }
}