/* Merket UI foundation. Shared only by platform and administrative surfaces. */
:root {
    --mk-brand: #ff6400;
    --mk-brand-hover: #d94f00;
    --mk-brand-soft: #fff0e6;
    --mk-ink: #191817;
    --mk-text: #22201e;
    --mk-muted: #6d6964;
    --mk-canvas: #f5f4f1;
    --mk-surface: #ffffff;
    --mk-surface-muted: #faf9f7;
    --mk-border: #dedad4;
    --mk-border-strong: #c9c3bc;
    --mk-success: #18794e;
    --mk-success-soft: #edf8f2;
    --mk-warning: #9a6200;
    --mk-warning-soft: #fff7df;
    --mk-danger: #b42318;
    --mk-danger-soft: #fff1f0;
    --mk-info: #3157d5;
    --mk-info-soft: #eef3ff;
    --mk-radius-sm: 6px;
    --mk-radius: 9px;
    --mk-radius-lg: 12px;
    --mk-shadow-raised: 0 12px 30px rgba(25, 24, 23, .08);
    --mk-focus: 0 0 0 3px rgba(255, 100, 0, .22);
    --mk-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mk-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    /* Compatibility tokens while existing pages are migrated block by block. */
    --background: var(--mk-canvas);
    --surface: var(--mk-surface);
    --text: var(--mk-text);
    --muted: var(--mk-muted);
    --primary: var(--mk-brand);
    --primary-hover: var(--mk-brand-hover);
    --border: var(--mk-border);
    --danger: var(--mk-danger);
    --danger-bg: var(--mk-danger-soft);
    --success: var(--mk-success);
    --warning: var(--mk-warning);
    --radius: var(--mk-radius-lg);
    --shadow: var(--mk-shadow-raised);
}

html { color-scheme: light; font-family: var(--mk-font); }
body { color: var(--mk-text); background: var(--mk-canvas); }
button, input, select, textarea { font-family: inherit; }
::selection { color: var(--mk-ink); background: #ffd0b3; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--mk-brand);
    outline-offset: 2px;
}

/* Typography */
:where(h1, h2, h3, h4) { color: var(--mk-ink); text-wrap: balance; }
:where(.eyebrow, .mk-eyebrow) {
    color: var(--mk-brand-hover);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .065em;
    text-transform: uppercase;
}
.mk-mono, code, kbd { font-family: var(--mk-mono); }

/* Controls */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea) {
    border-color: var(--mk-border);
    border-radius: var(--mk-radius);
    color: var(--mk-text);
    background: var(--mk-surface);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):hover:not(:disabled) {
    border-color: var(--mk-border-strong);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):focus {
    border-color: var(--mk-brand);
    box-shadow: var(--mk-focus);
}
:where(input, select, textarea):disabled {
    color: #817c76;
    background: #efede9;
    cursor: not-allowed;
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--mk-brand); }
[aria-invalid="true"] { border-color: var(--mk-danger) !important; }
.field-error { color: var(--mk-danger); }
.field-help { color: var(--mk-muted); }

/* Buttons and actions */
:where(button, .button-link, .button, .mk-button) {
    border-radius: var(--mk-radius);
    font-weight: 650;
}
:where(button:not(.button-secondary):not(.button-danger):not(.mk-button--secondary):not(.mk-button--ghost):not(.mk-button--danger), .button-link:not(.button-secondary):not(.button-danger), .button-primary, .mk-button--primary) {
    color: #fff;
    background: var(--mk-brand);
}
:where(button:not(.button-secondary):not(.button-danger):not(.mk-button--secondary):not(.mk-button--ghost):not(.mk-button--danger), .button-link:not(.button-secondary):not(.button-danger), .button-primary, .mk-button--primary):hover {
    color: #fff;
    background: var(--mk-brand-hover);
}
:where(button, .button-link, .button, .mk-button):active { transform: translateY(1px); }
:where(button, .button-link, .button, .mk-button):disabled,
:where(button, .button-link, .button, .mk-button)[aria-disabled="true"] {
    opacity: .52;
    cursor: not-allowed;
    transform: none;
}
:where(.button-secondary, .mk-button--secondary) {
    border: 1px solid var(--mk-border-strong);
    color: var(--mk-text);
    background: var(--mk-surface);
}
:where(.button-secondary, .mk-button--secondary):hover {
    border-color: var(--mk-ink);
    color: var(--mk-ink);
    background: var(--mk-surface-muted);
}
:where(.mk-button--ghost) { color: var(--mk-text); background: transparent; }
:where(.mk-button--ghost):hover { color: var(--mk-brand-hover); background: var(--mk-brand-soft); }
:where(.button-danger, .mk-button--danger) {
    border: 1px solid #efb5b0;
    color: var(--mk-danger);
    background: var(--mk-surface);
}
:where(.button-danger, .mk-button--danger):hover { color: #fff; background: var(--mk-danger); }

/* Surfaces */
:where(.auth-card, .form-section, .management-row, .navigation-card, .status-card, .mk-surface) {
    border-color: var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-surface);
    box-shadow: none;
}
.auth-card { box-shadow: var(--mk-shadow-raised); }
.form-section { padding: clamp(20px, 3vw, 28px); }
.management-row:hover, .navigation-card:hover { border-color: var(--mk-border-strong); }

/* Feedback */
:where(.alert, .mk-alert) {
    border-radius: var(--mk-radius);
    border-color: #efb5b0;
    color: var(--mk-danger);
    background: var(--mk-danger-soft);
}
:where(.alert-success, .mk-alert--success) {
    border-color: #a9d9c1;
    color: var(--mk-success);
    background: var(--mk-success-soft);
}
:where(.mk-alert--warning, .rate-limit-lock) {
    border-color: #e9ce83;
    color: #704b08;
    background: var(--mk-warning-soft);
}
:where(.mk-alert--info) {
    border-color: #bfd0f5;
    color: #2549a8;
    background: var(--mk-info-soft);
}
.app-toast { border-radius: var(--mk-radius); border-left-color: var(--mk-brand); }
.app-toast__icon { background: var(--mk-brand); }

/* Status badges */
:where(.status-badge, .mk-badge) { border-radius: 999px; font-weight: 700; }
:where(.status-badge.available, .status-badge.published, .subscription-active, .mk-badge--success) {
    color: var(--mk-success);
    background: var(--mk-success-soft);
}
:where(.status-badge.draft, .subscription-past_due, .mk-badge--warning) {
    color: var(--mk-warning);
    background: var(--mk-warning-soft);
}
:where(.status-badge.archived, .status-badge.discontinued, .mk-badge--neutral) {
    color: var(--mk-muted);
    background: #efede9;
}
:where(.subscription-suspended, .subscription-cancelled, .mk-badge--danger) {
    color: var(--mk-danger);
    background: var(--mk-danger-soft);
}

/* Tabs */
:where(.settings-tabs, .variant-filters, .product-editor-tabs, .mk-tabs) {
    border-color: var(--mk-border);
    background: #ebe8e3;
}
:where(.settings-tabs button, .variant-filter, .product-editor-tabs button, .mk-tab) {
    color: var(--mk-muted);
    border-radius: var(--mk-radius-sm);
}
:where(.settings-tabs button:hover, .settings-tabs button.is-active, .variant-filter:hover, .variant-filter.is-active, .product-editor-tabs button:hover, .product-editor-tabs button.is-active, .mk-tab:hover, .mk-tab[aria-selected="true"]) {
    color: var(--mk-brand-hover);
    background: var(--mk-surface);
    box-shadow: none;
}

/* Tables and data lists */
:where(.mk-table-wrap) { overflow-x: auto; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); background: var(--mk-surface); }
:where(.mk-table) { width: 100%; border-collapse: collapse; }
:where(.mk-table th, .mk-table td) { padding: 13px 16px; border-bottom: 1px solid var(--mk-border); text-align: left; vertical-align: middle; }
:where(.mk-table th) { color: var(--mk-muted); background: var(--mk-surface-muted); font-size: .75rem; font-weight: 700; }
:where(.mk-table tr:last-child td) { border-bottom: 0; }
:where(.mk-table tbody tr:hover) { background: #fffaf7; }

/* Empty, loading and modal primitives */
:where(.empty-state, .mk-empty) {
    border-color: var(--mk-border-strong);
    border-radius: var(--mk-radius-lg);
    color: var(--mk-muted);
    background: var(--mk-surface-muted);
}
.mk-loading { display: inline-flex; align-items: center; gap: 9px; color: var(--mk-muted); }
.mk-spinner { width: 18px; height: 18px; border: 2px solid var(--mk-border); border-top-color: var(--mk-brand); border-radius: 50%; animation: mk-spin .7s linear infinite; }
.mk-modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(25, 24, 23, .55); }
.mk-modal { width: min(100%, 520px); padding: 24px; border: 1px solid var(--mk-border); border-radius: var(--mk-radius-lg); background: var(--mk-surface); box-shadow: 0 24px 70px rgba(25, 24, 23, .24); }

/* Navigation primitives for the following page-migration blocks. */
.mk-app-shell { min-height: 100vh; background: var(--mk-canvas); }
.mk-sidebar { color: #fff; background: var(--mk-ink); }
.mk-sidebar a { color: #d8d4cf; text-decoration: none; }
.mk-sidebar a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.mk-sidebar a[aria-current="page"] { color: #fff; background: rgba(255, 100, 0, .18); box-shadow: inset 3px 0 var(--mk-brand); }
.mk-topbar { border-bottom: 1px solid var(--mk-border); background: rgba(255, 255, 255, .94); }

/* Explicit component variants keep their meaning even when used on native buttons. */
.mk-button--primary { color: #fff; background: var(--mk-brand); }
.mk-button--primary:hover { color: #fff; background: var(--mk-brand-hover); }
.mk-button--secondary { border: 1px solid var(--mk-border-strong); color: var(--mk-text); background: var(--mk-surface); }
.mk-button--secondary:hover { border-color: var(--mk-ink); color: var(--mk-ink); background: var(--mk-surface-muted); }
.mk-button--ghost { color: var(--mk-text); background: transparent; }
.mk-button--ghost:hover { color: var(--mk-brand-hover); background: var(--mk-brand-soft); }
.mk-button--danger { border: 1px solid #efb5b0; color: var(--mk-danger); background: var(--mk-surface); }
.mk-button--danger:hover { color: #fff; background: var(--mk-danger); }

/* Existing shared surfaces immediately inherit the approved brand. */
.topbar { border-color: var(--mk-border); background: rgba(255, 255, 255, .94); }
.auth-shell { background: radial-gradient(circle at 15% 10%, #fff0e6 0, transparent 34%), var(--mk-canvas); }
.auth-home-link:hover, .form-link-row a, .support-note a { color: var(--mk-brand-hover); }
.info-tooltip { background: var(--mk-ink); }
.design-studio-pages button:hover, .design-studio-pages button.active { color: var(--mk-brand-hover); background: var(--mk-brand-soft); }
.design-editor-panel-heading small, .design-studio-actions > a { color: var(--mk-brand-hover); }

@keyframes mk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 640px) {
    .mk-modal { padding: 20px; }
    :where(.form-actions, .row-actions) { flex-wrap: wrap; }
    :where(.form-actions > *, .row-actions > *) { max-width: 100%; }
}

/* Estado público global: no hereda el shell administrativo. */
.public-state-shell {
    display: grid;
    min-height: 100vh;
    padding: clamp(20px, 5vw, 64px);
    place-items: center;
    background: var(--mk-canvas);
}
.public-state-card {
    position: relative;
    width: min(100%, 620px);
    overflow: hidden;
    padding: clamp(30px, 6vw, 58px);
    border: 1px solid var(--mk-border);
    border-radius: var(--mk-radius-lg);
    background: var(--mk-surface);
    box-shadow: 0 18px 54px rgba(25, 24, 23, .09);
}
.public-state-code {
    position: absolute;
    top: -35px;
    right: 14px;
    color: rgba(255, 100, 0, .075);
    font-size: clamp(7rem, 22vw, 12rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.08em;
    pointer-events: none;
}
.public-state-card > *:not(.public-state-code) { position: relative; }
.public-state-card h1 { max-width: 500px; margin: 8px 0 14px; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.06; letter-spacing: -.045em; }
.public-state-card .intro { max-width: 510px; color: var(--mk-muted); line-height: 1.65; }
.public-state-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.public-state-actions .button-link { min-height: 46px; }
@media (max-width: 520px) {
    .public-state-actions { align-items: stretch; flex-direction: column; }
    .public-state-actions .button-link { width: 100%; }
}