/*
 * Generic CMS admin theme.
 *
 * This file is engine-owned. Site-specific fonts, colors and cosmetic choices
 * belong in cfg('admin_theme_css'), for example /site/admin-theme.css.
 */

:root,
[data-cms-theme="dark"] {
  color-scheme: dark;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --font-condensed: var(--font-body);
  --cms-root-font-size: 16.5px;
  --cms-color-canvas: #191b1e;
  --cms-color-sidebar: #27313a;
  --cms-color-surface: #202327;
  --cms-color-surface-alt: #1d2023;
  --cms-color-surface-raised: #272b30;
  --cms-color-field: #181b1f;
  --cms-color-text: #f2f3f5;
  --cms-color-muted: #adb4bd;
  --cms-color-faint: #77818c;
  --cms-history-metadata-color: #808b96;
  --cms-color-border: #343a42;
  --cms-color-border-strong: #4b545f;
  --cms-color-accent: #729ce0;
  --cms-color-accent-hover: #91b5ec;
  --cms-color-accent-soft: rgba(114, 156, 224, .16);
  --cms-color-success: #70c486;
  --cms-color-danger: #e06b63;
  --cms-color-danger-soft: rgba(224, 107, 99, .11);
  --cms-shadow-panel: 0 1.5rem 4rem rgba(0, 0, 0, .22);
  --cms-bg-page: var(--cms-color-canvas);
  --cms-bg-sidebar: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(21, 30, 38, .1) 52%, rgba(7, 12, 17, .16)), var(--cms-color-sidebar);
  --cms-bg-toolbar: color-mix(in srgb, var(--cms-color-canvas) 92%, transparent);
  --cms-bg-panel: var(--cms-color-surface-alt);
  --cms-surface-gradient: var(--cms-bg-panel);
  --cms-dashboard-card-bg: var(--cms-surface-gradient);
  --cms-form-section-bg: var(--cms-surface-gradient);
  --cms-aside-panel-bg: var(--cms-form-section-bg);
  --cms-bg-field-focus: var(--cms-color-surface);
  --cms-bg-field-hover: rgba(255, 255, 255, .035);
  --cms-bg-hover-subtle: rgba(255, 255, 255, .016);
  --cms-bg-hover: rgba(255, 255, 255, .026);
  --cms-bg-hover-medium: rgba(255, 255, 255, .04);
  --cms-bg-hover-strong: rgba(255, 255, 255, .06);
  --cms-bg-active: #3d4854;
  --cms-bg-control: rgba(255, 255, 255, .02);
  --cms-bg-control-hover: rgba(255, 255, 255, .06);
  --cms-sidebar-text: #f4f6f8;
  --cms-sidebar-muted: #d2d8de;
  --cms-sidebar-faint: #909ca8;
  --cms-sidebar-label: #9ca7b2;
  --cms-sidebar-brand-accent: #f4f6f8;
  --cms-sidebar-hover-bg: rgba(255, 255, 255, .075);
  --cms-sidebar-active-bg: var(--cms-bg-active);
  --cms-sidebar-active-text: #8db4eb;
  --cms-sidebar-active-indicator: #7ba8e7;
  --cms-bg-danger-hover: var(--cms-color-danger-soft);
  --cms-bg-action-footer: rgba(12, 14, 16, .9);
  --cms-border-sidebar: rgba(255, 255, 255, .08);
  --cms-border-subtle: rgba(255, 255, 255, .07);
  --cms-border-control: rgba(255, 255, 255, .11);
  --cms-border-control-hover: rgba(255, 255, 255, .2);
  --cms-focus-ring: 0 0 0 2px var(--cms-color-accent-soft);
  --cms-shadow-footer: 0 -1rem 2rem rgba(0, 0, 0, .18);
  --cms-shadow-accent-action: 0 .45rem 1.1rem rgba(79, 140, 255, .12);
  --cms-attention-border: rgba(224, 107, 99, .42);
  --cms-attention-bg: rgba(224, 107, 99, .09);
  --cms-attention-chip-border: rgba(224, 107, 99, .42);
  --cms-attention-chip-bg: rgba(0, 0, 0, .12);
  --cms-dashboard-eyebrow-color: var(--cms-color-muted);
  --cms-section-title-color: var(--cms-color-text);
  --cms-color-on-accent: #080604;
  --cms-heading-font-weight: 650;
  --cms-heading-letter-spacing: 0;
  --cms-page-intro-max-width: 44rem;
  --cms-eyebrow-letter-spacing: .14em;
  --cms-nav-link-radius: .45rem;
  --cms-nav-link-gap: .12rem;
  --cms-nav-label-margin: .3rem .8rem .35rem;
  --cms-nav-link-min-height: clamp(2.15rem, calc(1.95rem + .65vh), 2.55rem);
  --cms-nav-link-font-size: .9rem;
  --cms-nav-indicator-left: .35rem;
  --cms-nav-indicator-width: .28rem;
  --cms-nav-indicator-height: .28rem;
  --cms-nav-indicator-radius: 50%;
  --cms-avatar-border-color: var(--cms-color-border);
  --cms-avatar-bg: var(--cms-color-field);
  --cms-collection-title-font-weight: 650;
  --cms-field-label-color: var(--cms-color-text);
}

[data-cms-theme="light"] {
  color-scheme: light;
  --cms-color-canvas: #fefefe;
  --cms-color-sidebar: #394552;
  --cms-color-surface: #ffffff;
  --cms-color-surface-alt: #f8f8f7;
  --cms-color-surface-raised: #ffffff;
  --cms-color-field: #ffffff;
  --cms-color-text: #15181e;
  --cms-color-muted: #5d6674;
  --cms-color-faint: #68717e;
  --cms-history-metadata-color: #68717e;
  --cms-color-border: #e2e4e6;
  --cms-color-border-strong: #c8cdd4;
  --cms-color-accent: #044cd8;
  --cms-color-accent-hover: #003fb8;
  --cms-color-accent-soft: rgba(4, 76, 216, .1);
  --cms-color-success: #237743;
  --cms-color-danger: #bd3f38;
  --cms-color-danger-soft: rgba(189, 63, 56, .08);
  --cms-shadow-panel: 0 1.2rem 3rem rgba(22, 28, 36, .1);
  --cms-shadow-1: none;
  --cms-bg-page: var(--cms-color-canvas);
  --cms-bg-sidebar: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(31, 45, 58, .08) 56%, rgba(20, 31, 42, .14)), var(--cms-color-sidebar);
  --cms-bg-toolbar: rgba(255, 255, 255, .94);
  --cms-bg-panel: var(--cms-color-surface-alt);
  --cms-surface-gradient: var(--cms-bg-panel);
  --cms-dashboard-card-bg: var(--cms-surface-gradient);
  --cms-form-section-bg: var(--cms-surface-gradient);
  --cms-aside-panel-bg: var(--cms-form-section-bg);
  --cms-bg-field-focus: #ffffff;
  --cms-bg-field-hover: rgba(4, 76, 216, .035);
  --cms-bg-hover-subtle: rgba(4, 76, 216, .025);
  --cms-bg-hover: rgba(4, 76, 216, .04);
  --cms-bg-hover-medium: rgba(4, 76, 216, .06);
  --cms-bg-hover-strong: rgba(4, 76, 216, .085);
  --cms-bg-active: rgba(4, 76, 216, .075);
  --cms-bg-control: rgba(4, 76, 216, .018);
  --cms-bg-control-hover: rgba(4, 76, 216, .065);
  --cms-sidebar-text: #ffffff;
  --cms-sidebar-muted: #e4e9ee;
  --cms-sidebar-faint: #b3bfcc;
  --cms-sidebar-label: #b3bfcc;
  --cms-sidebar-brand-accent: #ffffff;
  --cms-sidebar-hover-bg: rgba(255, 255, 255, .075);
  --cms-sidebar-active-bg: #586676;
  --cms-sidebar-active-text: #ffffff;
  --cms-sidebar-active-indicator: #76a5ff;
  --cms-bg-danger-hover: var(--cms-color-danger-soft);
  --cms-bg-action-footer: rgba(248, 248, 247, .94);
  --cms-border-sidebar: rgba(255, 255, 255, .1);
  --cms-border-subtle: rgba(21, 24, 30, .1);
  --cms-border-control: rgba(21, 24, 30, .16);
  --cms-border-control-hover: rgba(21, 24, 30, .28);
  --cms-focus-ring: 0 0 0 2px var(--cms-color-accent-soft);
  --cms-shadow-footer: 0 -1rem 2rem rgba(22, 28, 36, .06);
  --cms-shadow-accent-action: 0 .45rem 1.1rem rgba(4, 76, 216, .12);
  --cms-attention-border: rgba(189, 63, 56, .32);
  --cms-attention-bg: rgba(189, 63, 56, .07);
  --cms-attention-chip-border: rgba(189, 63, 56, .28);
  --cms-attention-chip-bg: rgba(255, 255, 255, .6);
  --cms-color-on-accent: #fff;
}

@media (prefers-color-scheme: light) {
  [data-cms-theme="system"] {
    color-scheme: light;
    --cms-color-canvas: #fefefe;
    --cms-color-sidebar: #394552;
    --cms-color-surface: #ffffff;
    --cms-color-surface-alt: #f8f8f7;
    --cms-color-surface-raised: #ffffff;
    --cms-color-field: #ffffff;
    --cms-color-text: #15181e;
    --cms-color-muted: #5d6674;
    --cms-color-faint: #68717e;
    --cms-history-metadata-color: #68717e;
    --cms-color-border: #e2e4e6;
    --cms-color-border-strong: #c8cdd4;
    --cms-color-accent: #044cd8;
    --cms-color-accent-hover: #003fb8;
    --cms-color-accent-soft: rgba(4, 76, 216, .1);
    --cms-color-success: #237743;
    --cms-color-danger: #bd3f38;
    --cms-color-danger-soft: rgba(189, 63, 56, .08);
    --cms-shadow-panel: 0 1.2rem 3rem rgba(22, 28, 36, .1);
    --cms-shadow-1: none;
    --cms-bg-page: var(--cms-color-canvas);
    --cms-bg-sidebar: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(31, 45, 58, .08) 56%, rgba(20, 31, 42, .14)), var(--cms-color-sidebar);
    --cms-bg-toolbar: rgba(255, 255, 255, .94);
    --cms-bg-panel: var(--cms-color-surface-alt);
    --cms-surface-gradient: var(--cms-bg-panel);
    --cms-dashboard-card-bg: var(--cms-surface-gradient);
    --cms-form-section-bg: var(--cms-surface-gradient);
    --cms-aside-panel-bg: var(--cms-form-section-bg);
    --cms-bg-field-focus: #ffffff;
    --cms-bg-field-hover: rgba(4, 76, 216, .035);
    --cms-bg-hover-subtle: rgba(4, 76, 216, .025);
    --cms-bg-hover: rgba(4, 76, 216, .04);
    --cms-bg-hover-medium: rgba(4, 76, 216, .06);
    --cms-bg-hover-strong: rgba(4, 76, 216, .085);
    --cms-bg-active: rgba(4, 76, 216, .075);
    --cms-bg-control: rgba(4, 76, 216, .018);
    --cms-bg-control-hover: rgba(4, 76, 216, .065);
    --cms-color-on-accent: #fff;
    --cms-sidebar-text: #ffffff;
    --cms-sidebar-muted: #e4e9ee;
    --cms-sidebar-faint: #b3bfcc;
    --cms-sidebar-label: #b3bfcc;
    --cms-sidebar-brand-accent: #ffffff;
    --cms-sidebar-hover-bg: rgba(255, 255, 255, .075);
    --cms-sidebar-active-bg: #586676;
    --cms-sidebar-active-text: #ffffff;
    --cms-sidebar-active-indicator: #76a5ff;
    --cms-bg-danger-hover: var(--cms-color-danger-soft);
    --cms-bg-action-footer: rgba(248, 248, 247, .94);
    --cms-border-sidebar: rgba(255, 255, 255, .1);
    --cms-border-subtle: rgba(21, 24, 30, .1);
    --cms-border-control: rgba(21, 24, 30, .16);
    --cms-border-control-hover: rgba(21, 24, 30, .28);
    --cms-focus-ring: 0 0 0 2px var(--cms-color-accent-soft);
    --cms-shadow-footer: 0 -1rem 2rem rgba(22, 28, 36, .06);
    --cms-shadow-accent-action: 0 .45rem 1.1rem rgba(4, 76, 216, .12);
    --cms-attention-border: rgba(189, 63, 56, .32);
    --cms-attention-bg: rgba(189, 63, 56, .07);
    --cms-attention-chip-border: rgba(189, 63, 56, .28);
    --cms-attention-chip-bg: rgba(255, 255, 255, .6);
  }
}

[data-cms-density="compact"] {
  --cms-root-font-size: 16px;
  --cms-topbar-height: 3.6rem;
  --cms-control-height: max(2.55rem, 44px);
  --cms-content-padding-top: var(--cms-space-4);
  --cms-dashboard-gap: var(--cms-space-3);
  --cms-dashboard-card-head-min-height: 3.8rem;
  --cms-dashboard-row-min-height: 3.45rem;
  --cms-next-row-min-height: 4.2rem;
  --cms-form-grid-gap: .9rem 1rem;
  --cms-form-grid-padding: .65rem var(--cms-space-3) var(--cms-space-3);
}

[data-cms-density="comfortable"] {
  --cms-root-font-size: 17px;
  --cms-topbar-height: 4.55rem;
  --cms-control-height: 3.05rem;
  --cms-dashboard-gap: var(--cms-space-5);
  --cms-dashboard-card-head-min-height: 4.9rem;
  --cms-dashboard-row-min-height: 4.55rem;
  --cms-next-row-min-height: 5.35rem;
  --cms-form-grid-gap: var(--cms-space-5);
}