/* ── Theme Utility Classes ──────────────────────────────────────────── */
/* Background */
.t-bg { background-color: var(--moroc-bg); }
.t-surface { background-color: var(--moroc-surface); }
.t-surface-raised { background-color: color-mix(in srgb, var(--moroc-surface) 92%, var(--moroc-fg) 8%); }

/* Text */
.t-fg { color: var(--moroc-fg); }
.t-muted { color: var(--moroc-muted); }
.t-subtle { color: var(--moroc-subtle); }

/* Borders */
.t-border { border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 95%, transparent); }
.t-surface-border { border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 95%, transparent); }
.t-surface-raised-border { border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 76%, var(--moroc-fg, #fff) 24%); }
.t-divider { border-color: var(--moroc-divider, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 70%, transparent)); }
.t-divider-strong { border-color: var(--moroc-divider-strong, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 82%, var(--moroc-fg, #fff) 18%)); }

/* Derived semantic tokens */
:where(
    [data-theme-custom],
    [data-content-surface-canvas],
    [data-canvas-topbar],
    [data-content-surface-section-rail],
    [data-ao-root][data-ao-system-theme="1"]
) {
    --moroc-surface-raised: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 8%);
    --moroc-surface-raised-hover: color-mix(in srgb, var(--moroc-surface, #141414) 89%, var(--moroc-fg, #fff) 11%);
    --moroc-divider: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 70%, transparent);
    --moroc-divider-strong: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 82%, var(--moroc-fg, #fff) 18%);
    --moroc-control-bg: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 8%);
    --moroc-control-bg-hover: color-mix(in srgb, var(--moroc-surface, #141414) 86%, var(--moroc-fg, #fff) 14%);
    --moroc-control-bg-active: color-mix(in srgb, var(--moroc-surface, #141414) 82%, var(--moroc-fg, #fff) 18%);
    --moroc-control-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 22%);
    --moroc-control-border-hover: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 68%, var(--moroc-fg, #fff) 32%);
    --moroc-control-border-active: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 58%, var(--moroc-fg, #fff) 42%);
    --moroc-control-fg: var(--moroc-fg, #fff);
    --moroc-control-muted: color-mix(in srgb, var(--moroc-muted, rgba(255, 255, 255, 0.62)) 78%, transparent);
    --moroc-control-placeholder: color-mix(in srgb, var(--moroc-muted, rgba(255, 255, 255, 0.62)) 72%, transparent);
    --moroc-menu-bg: color-mix(in srgb, var(--moroc-surface, #161616) 94%, var(--moroc-fg, #ffffff) 6%);
    --moroc-menu-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 72%, var(--moroc-fg, #fff) 12%);
    --moroc-menu-item-bg-hover: color-mix(in srgb, var(--moroc-fg, #ffffff) 4%, transparent);
    --moroc-menu-item-bg-selected: color-mix(in srgb, var(--moroc-fg, #ffffff) 6%, transparent);
    --moroc-focus-ring-soft: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 34%, transparent);
    --moroc-focus-ring-medium: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 58%, transparent);
    --moroc-focus-border: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 64%, transparent);
    --moroc-card-bg: color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 10%);
    --moroc-card-bg-hover: color-mix(in srgb, var(--moroc-surface, #141414) 86%, var(--moroc-fg, #fff) 14%);
    --moroc-card-bg-active: color-mix(in srgb, var(--moroc-surface, #141414) 82%, var(--moroc-fg, #fff) 18%);
    --moroc-card-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 74%, var(--moroc-fg, #fff) 26%);
    --moroc-card-border-hover: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 70%, var(--moroc-fg, #fff) 30%);
    --moroc-card-border-muted: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 76%, transparent);
    --moroc-chip-bg: color-mix(in srgb, var(--moroc-fg, #fff) 6%, transparent);
    --moroc-chip-bg-strong: color-mix(in srgb, var(--moroc-fg, #fff) 10%, transparent);
    --moroc-chip-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 68%, var(--moroc-fg, #fff) 20%);
    --moroc-chip-fg: color-mix(in srgb, var(--moroc-fg, #fff) 72%, transparent);
    --moroc-chip-fg-strong: color-mix(in srgb, var(--moroc-fg, #fff) 90%, transparent);
    --moroc-empty-bg: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 6%);
    --moroc-empty-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 72%, var(--moroc-fg, #fff) 18%);
    --moroc-empty-icon-bg: color-mix(in srgb, var(--moroc-fg, #fff) 6%, transparent);
    --moroc-skeleton-bg: color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 10%);
    --moroc-skeleton-line: color-mix(in srgb, var(--moroc-fg, #fff) 10%, transparent);
    --moroc-skeleton-line-muted: color-mix(in srgb, var(--moroc-fg, #fff) 7%, transparent);
    --moroc-media-control-bg: color-mix(in srgb, var(--moroc-bg, #000) 90%, transparent);
    --moroc-media-control-bg-hover: color-mix(in srgb, var(--moroc-bg, #000) 96%, var(--moroc-fg, #fff) 4%);
    --moroc-media-control-border: color-mix(in srgb, var(--moroc-fg, #fff) 38%, transparent);
    --moroc-media-control-border-hover: color-mix(in srgb, var(--moroc-fg, #fff) 54%, transparent);
    --moroc-media-control-shadow: color-mix(in srgb, var(--moroc-bg, #000) 58%, transparent);
    --moroc-danger-bg: color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 8%, var(--moroc-surface, #141414));
    --moroc-danger-bg-hover: color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 13%, var(--moroc-surface, #141414));
    --moroc-danger-border: color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 34%, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)));
    --moroc-danger-border-hover: color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 48%, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)));
    --moroc-danger-text: color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 78%, var(--moroc-fg, #fff));
}

/* Theme-native chrome controls */
.t-control {
    background-color: var(--moroc-control-bg, color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 8%));
    border-color: var(--moroc-control-border, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 22%));
    color: var(--moroc-control-fg, var(--moroc-fg, #fff));
}

.t-control:hover {
    background-color: var(--moroc-control-bg-hover, color-mix(in srgb, var(--moroc-surface, #141414) 86%, var(--moroc-fg, #fff) 14%));
    border-color: var(--moroc-control-border-hover, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 68%, var(--moroc-fg, #fff) 32%));
}

.t-control-active {
    background-color: var(--moroc-control-bg-active, color-mix(in srgb, var(--moroc-surface, #141414) 82%, var(--moroc-fg, #fff) 18%));
    border-color: var(--moroc-control-border-active, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 58%, var(--moroc-fg, #fff) 42%));
}

.t-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--moroc-focus-ring-medium, color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 58%, transparent));
}

/* System-themed ActionOverlay forms need stronger field chrome than the
   default dark overlay hairline, especially on near-black Page palettes. */
[data-ao-root][data-ao-system-theme="1"] .moroc-actionoverlay-form .moroc-field[data-moroc-field-style="stacked"] {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--moroc-fg, #fff) 3%, transparent),
        0 0 0 1px color-mix(in srgb, var(--moroc-bg, #000) 34%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-actionoverlay-form .moroc-field[data-moroc-field-style="stacked"]:hover {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 5%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 74%, var(--moroc-fg, #fff) 12%);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-actionoverlay-form .moroc-field[data-moroc-field-style="stacked"].focused,
[data-ao-root][data-ao-system-theme="1"] .moroc-actionoverlay-form .moroc-field[data-moroc-field-style="stacked"]:focus-within {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 7%);
    border-color: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 34%, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--moroc-fg, #fff) 5%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-actionoverlay-form .moroc-field[data-moroc-field-style="stacked"][data-moroc-ui-state="error"] {
    background-color: var(--moroc-danger-bg, color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 8%, var(--moroc-surface, #141414)));
    border-color: var(--moroc-danger-border, color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 34%, var(--moroc-surface-border, rgba(255, 255, 255, 0.08))));
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"] {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
    color: var(--moroc-control-fg, var(--moroc-fg, #fff));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--moroc-fg, #fff) 3%, transparent),
        0 0 0 1px color-mix(in srgb, var(--moroc-bg, #000) 34%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"]:hover {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 5%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 74%, var(--moroc-fg, #fff) 12%);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"].focused,
[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"]:focus-within {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 7%);
    border-color: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 34%, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)));
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--moroc-fg, #fff) 5%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"][data-moroc-ui-state="error"] {
    background-color: var(--moroc-danger-bg, color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 8%, var(--moroc-surface, #141414)));
    border-color: var(--moroc-danger-border, color-mix(in srgb, var(--moroc-danger, oklch(0.600 0.160 21)) 34%, var(--moroc-surface-border, rgba(255, 255, 255, 0.08))));
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"] .input-field {
    color: var(--moroc-control-fg, var(--moroc-fg, #fff));
}

[data-ao-root][data-ao-system-theme="1"] .moroc-field[data-moroc-field-theme="system"][data-moroc-field-style="stacked"] .input-field::placeholder {
    color: var(--moroc-control-placeholder, color-mix(in srgb, var(--moroc-muted, rgba(255, 255, 255, 0.62)) 72%, transparent));
}

[data-ao-root][data-ao-system-theme="1"] [data-ao-header],
[data-ao-root][data-ao-system-theme="1"] [data-ao-toolbar],
[data-ao-root][data-ao-system-theme="1"] [data-ao-auxiliary-footer],
[data-ao-root][data-ao-system-theme="1"] [data-ao-footer] > div {
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.08)) 90%, var(--moroc-fg, #fff) 10%);
}

[data-ao-root][data-ao-system-theme="1"] [data-enquiry-attachment-dropzone] {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
    color: var(--moroc-muted, rgba(255, 255, 255, 0.62));
}

[data-ao-root][data-ao-system-theme="1"] [data-enquiry-attachment-dropzone]:hover {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 5%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 74%, var(--moroc-fg, #fff) 12%);
}

[data-ao-root][data-ao-system-theme="1"] [data-enquiry-attachment-dropzone] > .grid {
    background-color: color-mix(in srgb, var(--moroc-fg, #fff) 5%, transparent);
    color: color-mix(in srgb, var(--moroc-fg, #fff) 56%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] [data-enquiry-attachment-dropzone] .text-white\/75 {
    color: color-mix(in srgb, var(--moroc-fg, #fff) 74%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] [data-enquiry-attachment-dropzone] .text-white\/35 {
    color: color-mix(in srgb, var(--moroc-muted, rgba(255, 255, 255, 0.62)) 62%, transparent);
}

[data-ao-root][data-ao-system-theme="1"] .ao-system-list-container {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%);
    border-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
}

[data-ao-root][data-ao-system-theme="1"] .ao-system-item-divider {
    border-bottom-color: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
}

[data-ao-root][data-ao-system-theme="1"] .ao-system-item-hover:hover {
    background-color: color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 5%);
}

.ao-share-button {
    align-items: center;
    background-color: var(--ao-share-button-bg, color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%));
    border-color: var(--ao-share-button-border, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%));
    border-radius: 9999px;
    color: var(--ao-share-button-fg, var(--moroc-fg, #fff));
    justify-content: center;
    min-height: 2.5rem;
    box-shadow: none;
}

.ao-share-button:hover {
    background-color: var(--ao-share-button-bg-hover, color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 7%));
    border-color: var(--ao-share-button-border-hover, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 70%, var(--moroc-fg, #fff) 16%));
    color: var(--ao-share-button-fg-hover, var(--moroc-fg, #fff));
}

.ao-share-button:focus-visible {
    box-shadow: 0 0 0 2px var(--ao-share-button-ring, color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 24%, transparent));
}

[data-ao-root][data-ao-system-theme="1"] .ao-share-button {
    --ao-share-button-bg: color-mix(in srgb, var(--moroc-surface, #141414) 94%, var(--moroc-fg, #fff) 3%);
    --ao-share-button-border: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 8%);
    --ao-share-button-bg-hover: color-mix(in srgb, var(--moroc-surface, #141414) 90%, var(--moroc-fg, #fff) 7%);
    --ao-share-button-border-hover: color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 70%, var(--moroc-fg, #fff) 16%);
    --ao-share-button-ring: color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 24%, transparent);
}

/* Links - Accent (for CTAs) */
.t-link { color: var(--moroc-link); }
.t-link:hover { color: var(--moroc-link-hover); }
.t-link-accent { color: var(--moroc-link); }
.t-link-accent:hover { color: var(--moroc-link-hover); }

/* Links - Subtle (for incidental/supporting links) */
.t-link-subtle { color: var(--moroc-subtle); text-decoration-color: var(--moroc-border, rgba(255, 255, 255, 0.12)); text-underline-offset: 3px; }
.t-link-subtle:hover { color: var(--moroc-muted); text-decoration-color: var(--moroc-muted); }

/* Focus & Selection */
.t-focus-ring:focus { outline-color: var(--moroc-focus-ring); box-shadow: 0 0 0 2px var(--moroc-focus-ring); }
::selection { background-color: var(--moroc-selection, rgba(59, 130, 246, 0.3)); }

/* Semantic status colors */
.t-danger { background-color: var(--moroc-danger); }
.t-danger-fg { color: var(--moroc-danger-fg); }
.t-danger-text { color: var(--moroc-danger); }

.t-warning { background-color: var(--moroc-warning); }
.t-warning-fg { color: var(--moroc-warning-fg); }
.t-warning-text { color: var(--moroc-warning); }

.t-success { background-color: var(--moroc-success); }
.t-success-fg { color: var(--moroc-success-fg); }
.t-success-text { color: var(--moroc-success); }

.t-info { background-color: var(--moroc-info); }
.t-info-fg { color: var(--moroc-info-fg); }
.t-info-text { color: var(--moroc-info); }

/* Surfaces */
.t-surface-hover:hover { background-color: var(--moroc-surface); }
.t-surface-raised-hover:hover { background-color: color-mix(in srgb, var(--moroc-surface) 89%, var(--moroc-fg) 11%); }

/* Media overlay controls */
.t-media-control {
    background-color: var(--moroc-media-control-bg, color-mix(in srgb, var(--moroc-bg, #000) 78%, transparent));
    border-color: var(--moroc-media-control-border, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.18)) 78%, transparent));
    color: var(--moroc-fg, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--moroc-fg, #fff) 9%, transparent),
        0 8px 22px var(--moroc-media-control-shadow, color-mix(in srgb, var(--moroc-bg, #000) 58%, transparent));
}

.t-media-control:hover {
    background-color: var(--moroc-media-control-bg-hover, color-mix(in srgb, var(--moroc-bg, #000) 88%, transparent));
    border-color: var(--moroc-media-control-border-hover, color-mix(in srgb, var(--moroc-fg, #fff) 26%, transparent));
}

.t-media-control:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 72%, transparent),
        0 8px 22px var(--moroc-media-control-shadow, color-mix(in srgb, var(--moroc-bg, #000) 58%, transparent));
}

/* Content-surface swiper nav sizes */
.moroc-content-surface-swiper-nav {
    width: var(--moroc-content-surface-swiper-nav-size);
    height: var(--moroc-content-surface-swiper-nav-size);
    min-width: var(--moroc-content-surface-swiper-nav-size);
    min-height: var(--moroc-content-surface-swiper-nav-size);
}

.moroc-content-surface-swiper-nav--s {
    --moroc-content-surface-swiper-nav-size: 2rem;
    --moroc-content-surface-swiper-nav-icon-size: 0.875rem;
}

.moroc-content-surface-swiper-nav--m {
    --moroc-content-surface-swiper-nav-size: 2.25rem;
    --moroc-content-surface-swiper-nav-icon-size: 0.875rem;
}

.moroc-content-surface-swiper-nav--l {
    --moroc-content-surface-swiper-nav-size: 2.5rem;
    --moroc-content-surface-swiper-nav-icon-size: 1rem;
}

.moroc-content-surface-swiper-nav svg {
    width: var(--moroc-content-surface-swiper-nav-icon-size);
    height: var(--moroc-content-surface-swiper-nav-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Card overlay controls use the same theme recipe as chrome controls. */
.t-card-control {
    background-color: var(--moroc-control-bg, color-mix(in srgb, var(--moroc-surface, #141414) 92%, var(--moroc-fg, #fff) 8%));
    border-color: var(--moroc-control-border, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 78%, var(--moroc-fg, #fff) 22%));
    color: var(--moroc-control-fg, var(--moroc-fg, #fff));
    box-shadow: none;
}

.t-card-control:hover {
    background-color: var(--moroc-control-bg-hover, color-mix(in srgb, var(--moroc-surface, #141414) 86%, var(--moroc-fg, #fff) 14%));
    border-color: var(--moroc-control-border-hover, color-mix(in srgb, var(--moroc-surface-border, rgba(255, 255, 255, 0.12)) 68%, var(--moroc-fg, #fff) 32%));
    color: var(--moroc-control-fg, var(--moroc-fg, #fff));
}

.t-card-control:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--moroc-focus-ring-medium, color-mix(in srgb, var(--moroc-focus-ring, var(--moroc-fg, #fff)) 58%, transparent));
}