/* Marka brand tokens · v1.0 · scoped to .marka.
   Opt in only on Marka-owned web surfaces. Do not override Shopify's native
   component styling or inject this stylesheet into checkout UI extensions.
   Native Shopify UI fonts/components take precedence; storefront widgets
   inherit the merchant's font unless the merchant explicitly chooses another. */
.marka {
  --marka-navy: #1b3358;
  --marka-orange: #e8871e;
  --marka-amber: #ffc24b;
  --marka-cream: #fdf1de;
  --marka-paper: #fffdf9;
  --marka-page: #faf6f0;
  --marka-white: #ffffff;
  --marka-muted: #5a6675;
  --marka-border: #e4ded4; /* Decorative separators only. */
  --marka-interactive-border: #7b8794;
  --marka-success: #19734b;
  --marka-error: #b42318;
  --marka-warning: #8a5000;
  --marka-info: #1b5e9b;
  /* Light semantic foregrounds above pair with opaque light surfaces.
     Dark foreground variants below pair with Marka Navy, each > 7:1.
     Always accompany semantic color with visible text and/or an icon. */
  --marka-success-dark: #8fd8b2;
  --marka-error-dark: #ffb4a9;
  --marka-warning-dark: #ffd18a;
  --marka-info-dark: #a9d3ff;
  --marka-font-brand: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --marka-font-widget: inherit;
  --marka-text: var(--marka-navy);
  --marka-text-secondary: var(--marka-muted);
  --marka-surface: var(--marka-white);
  --marka-surface-subtle: var(--marka-cream);
  --marka-surface-l1: rgba(255, 255, 255, .92);
  --marka-surface-l2: rgba(255, 255, 255, .84);
  --marka-glass-edge: rgba(255, 255, 255, .88);
  --marka-shadow: 0 16px 44px rgba(27, 51, 88, .10);
  --marka-focus: var(--marka-navy);
  --marka-focus-buffer: var(--marka-white);
  --marka-radius-control: 10px;
  --marka-radius-card: 16px;
  --marka-radius-hero: 24px;
  --marka-space-1: 4px;
  --marka-space-2: 8px;
  --marka-space-3: 12px;
  --marka-space-4: 16px;
  --marka-space-6: 24px;
  --marka-space-8: 32px;
  --marka-space-12: 48px;
  --marka-space-16: 64px;
  --marka-target-min: 44px;
  --marka-motion-fast: 120ms;
  --marka-motion-normal: 180ms;
  color: var(--marka-text);
  font-family: var(--marka-font-brand);
  color-scheme: light;
}
.marka[data-theme="dark"] {
  --marka-page: #12243f;
  --marka-text: var(--marka-cream);
  --marka-text-secondary: #c7cfda;
  --marka-surface: var(--marka-navy);
  --marka-surface-subtle: #263f64;
  --marka-border: #415575;
  --marka-interactive-border: #a3afbd;
  --marka-success: var(--marka-success-dark);
  --marka-error: var(--marka-error-dark);
  --marka-warning: var(--marka-warning-dark);
  --marka-info: var(--marka-info-dark);
  --marka-surface-l1: rgba(27, 51, 88, .92);
  --marka-surface-l2: rgba(27, 51, 88, .92);
  --marka-glass-edge: rgba(253, 241, 222, .24);
  --marka-shadow: 0 16px 44px rgba(0, 0, 0, .22);
  --marka-focus: var(--marka-amber);
  --marka-focus-buffer: var(--marka-navy);
  color-scheme: dark;
}
.marka .marka-card {
  background: var(--marka-surface);
  border: 1px solid var(--marka-border);
  border-radius: var(--marka-radius-card);
}
/* L0 is the baseline. Glass is progressive enhancement, never a requirement.
   Budget: at most 2 blurred surfaces per viewport, no nested backdrop blur.
   L2 is for a controlled, non-dense feature surface only. Never animate blur. */
.marka .marka-liquid {
  background: var(--marka-surface);
  border: 1px solid var(--marka-border);
  border-radius: var(--marka-radius-card);
  box-shadow: var(--marka-shadow);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .marka[data-material="glass"] .marka-liquid {
    background: var(--marka-surface-l1);
    border-color: var(--marka-glass-edge);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
  .marka[data-material="glass"] .marka-liquid[data-tier="l2"] {
    background: var(--marka-surface-l2);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    backdrop-filter: blur(20px) saturate(130%);
  }
  /* Dark material retains the restrained L1 treatment at both tiers. */
  .marka[data-theme="dark"][data-material="glass"] .marka-liquid[data-tier="l2"] {
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
}
.marka[data-material="solid"] .marka-liquid {
  background: var(--marka-surface);
  border-color: var(--marka-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.marka .marka-button {
  min-height: var(--marka-target-min);
  min-width: var(--marka-target-min);
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--marka-radius-control);
  font: 600 14px/1.3 var(--marka-font-brand);
  background: var(--marka-navy);
  color: var(--marka-white);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color var(--marka-motion-fast) ease, background-color var(--marka-motion-fast) ease, border-color var(--marka-motion-fast) ease, box-shadow var(--marka-motion-fast) ease;
}
.marka .marka-button:hover { box-shadow: 0 4px 12px rgba(27, 51, 88, .16); }
.marka .marka-button:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18); }
.marka .marka-button--accent { background: var(--marka-amber); color: var(--marka-navy); }
.marka .marka-button--secondary {
  background: var(--marka-surface);
  color: var(--marka-text);
  border-color: var(--marka-interactive-border);
}
.marka[data-theme="dark"] .marka-button:not(.marka-button--accent):not(.marka-button--secondary):not([disabled]) {
  border-color: var(--marka-interactive-border);
}
.marka .marka-button[disabled] {
  color: var(--marka-text-secondary);
  background: var(--marka-surface-subtle);
  border-color: var(--marka-border);
  cursor: not-allowed;
  box-shadow: none;
}
.marka :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--marka-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--marka-focus-buffer);
}
.marka .marka-field {
  min-height: var(--marka-target-min);
  border: 1px solid var(--marka-interactive-border);
  border-radius: var(--marka-radius-control);
  background: var(--marka-surface);
  color: var(--marka-text);
  font: 400 16px/1.5 var(--marka-font-brand);
  padding: 10px 12px;
}
@media (prefers-reduced-transparency: reduce) {
  .marka[data-material] .marka-liquid,
  .marka[data-material] .marka-liquid[data-tier="l2"],
  .marka[data-theme][data-material] .marka-liquid[data-tier="l2"] {
    background: var(--marka-surface);
    border-color: var(--marka-border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marka *, .marka *::before, .marka *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}