/* ═══════════════════════════════════════════════════════════════════════════
   Shared webshop-chrome tokens.

   CheckoutNavbar.razor.css reads --c-surface / --c-ink / --c-ink-2 / --c-border
   / --c-border-strong but does not define them: they are inherited from the page
   wrapper. Any page that renders <CheckoutNavbar> must therefore carry the
   .shop-chrome class, or the bar falls back to hardcoded light colours and stops
   following the tenant theme.

   Deliberately NOT a scoped .razor.css file: scoped stylesheets can't be shared
   between components, and these custom properties have to cross into
   CheckoutNavbar's own scope by DOM inheritance.

   Custom properties only — no layout or background. Pages own their own box
   (Checkout's .co is a flex column, ViewReceipt's wrapper is not), so declaring
   display/min-height here would silently reflow whoever opts in.
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-chrome {
    --co-primary: var(--shop-primary, #ff7200);
    --co-primary-ink: #fff;
    --co-primary-tint: color-mix(in srgb, var(--co-primary) 8%, transparent);
    --co-primary-tint-2: color-mix(in srgb, var(--co-primary) 16%, transparent);
    /* Follow the webshop theme tokens (light + dark via ShopThemeProvider). */
    --c-ink: var(--shop-font-color, #1f2328);
    --c-ink-2: color-mix(in srgb, var(--shop-font-color, #1f2328) 65%, transparent);
    --c-ink-3: color-mix(in srgb, var(--shop-font-color, #1f2328) 45%, transparent);
    --c-surface: var(--shop-surface, #fff);
    --c-muted: var(--shop-bg, #f5f5f5);
    --c-border: color-mix(in srgb, var(--shop-font-color, #1f2328) 12%, transparent);
    --c-border-strong: color-mix(in srgb, var(--shop-font-color, #1f2328) 22%, transparent);
    --c-sale: #e23434;
    --c-success: #128a4d;
    --r: var(--shop-border-radius, 12px);
    --r-sm: var(--shop-border-radius, 8px);
    --r-pill: 999px;
    --maxw: 1240px;
    --gut: 1rem;
    --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px -12px rgba(0,0,0,.18);
}

/* Dark mode — follows the OS like the legacy app's main-dark.css. A tenant's own
   dark --shop-* values still win; otherwise these dark fallbacks apply. */
@media (prefers-color-scheme: dark) {
    .shop-chrome {
        --c-ink: var(--shop-font-color, #f2f2f3);
        --c-ink-2: color-mix(in srgb, var(--shop-font-color, #f2f2f3) 65%, transparent);
        --c-ink-3: color-mix(in srgb, var(--shop-font-color, #f2f2f3) 45%, transparent);
        --c-surface: var(--shop-surface, #1f1f22);
        --c-muted: var(--shop-bg, #141416);
        --c-border: color-mix(in srgb, var(--shop-font-color, #ffffff) 14%, transparent);
        --c-border-strong: color-mix(in srgb, var(--shop-font-color, #ffffff) 24%, transparent);
        --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -14px rgba(0,0,0,.7);
    }
}

/* CheckoutNavbar stands in for MainLayout's global NavMenu wherever it renders.
   Kept here rather than repeated as an inline <style> on every hosting page so
   the pages can't drift out of sync with each other. */
body:has(.co-nav) .header {
    display: none;
}