@charset "UTF-8";

/*
 * MoonArrow badminton brand language.
 * Midnight navy (from the logo) is the only interactive colour: primary buttons, links,
 * focus rings and active states. Logo gold is decoration only (rules, marks, counters);
 * when gold must carry text use --moonarrow-color-gold-text on light or --moonarrow-color-gold-on-dark
 * on navy, both of which pass WCAG AA for body text.
 */
:root {
  --moonarrow-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Segoe UI", system-ui, sans-serif;
  --moonarrow-font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --moonarrow-font-latin: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Self-hosted Noto Serif TC (css/fonts/moonarrow-hero-serif.css), loaded only by pages that set a serif headline. */
  --moonarrow-font-serif-display: "MoonArrow Hero Serif", "Noto Serif TC", "PMingLiU", serif;

  --moonarrow-hero-media-ratio: 1 / 1;
  --moonarrow-hero-display-size: 36.5rem;
  --moonarrow-color-hero-surface: #fff;
  --moonarrow-color-brand-ink: #1d2136;
  --moonarrow-color-brand-ink-soft: #3a3f58;
  --moonarrow-color-brand-blue: #23283f;
  --moonarrow-color-brand-blue-dark: #11142a;
  --moonarrow-color-action-blue: #23283f;
  --moonarrow-color-action-blue-dark: #11142a;
  --moonarrow-color-content-blue-dark: #23283f;
  --moonarrow-color-cyan: #bd9157;
  --moonarrow-color-gold: #bd9157;
  --moonarrow-color-gold-soft: #efe6d7;
  --moonarrow-color-gold-text: #87622f;
  --moonarrow-color-gold-on-dark: #d9b98a;
  --moonarrow-color-night: #161a2c;
  --moonarrow-color-ice-page: #f6f7f9;
  --moonarrow-color-metal-soft: #eceef2;
  --moonarrow-color-media-surface: #f3f4f6;
  --moonarrow-color-media-substrate: #f1f2f5;
  --moonarrow-color-media-line: #e2e4e9;
  /* Daylight court (B2): white pages; neutral light greys only where a surface must read (image plates, quiet panels).
     Warm paper is an accent for a few deliberate spots only (utility strip, one closing band, a feature band,
     a status chip) — never the repeated band or panel colour, which tires the eye across pages. */
  --moonarrow-color-daylight-wash-top: #ffffff;
  --moonarrow-color-daylight-wash: #f5f6f7;
  --moonarrow-color-daylight-soft: #f8f9fa;
  --moonarrow-color-daylight-media: #f2f3f5;
  --moonarrow-color-paper-warm: #faf8f4;
  --moonarrow-color-paper-warm-soft: #fcfbf8;
  --moonarrow-color-hairline: rgba(29, 33, 54, 0.08);
  --moonarrow-color-ink-track: rgba(29, 33, 54, 0.12);
  --moonarrow-color-ink-control-line: rgba(29, 33, 54, 0.18);
  --moonarrow-color-gold-line: rgba(189, 145, 87, 0.6);
  --moonarrow-color-gold-net: rgba(189, 145, 87, 0.5);
  --moonarrow-color-outline-stroke: rgba(189, 145, 87, 0.5);
  --moonarrow-color-outline-stroke-ink: var(--moonarrow-color-brand-ink);
  --moonarrow-color-utility-surface: var(--moonarrow-color-paper-warm-soft);
  --moonarrow-color-utility-text: #3f4152;
  --moonarrow-color-paper-veil: rgba(255, 255, 255, 0.62);
  --moonarrow-color-brand-blue-soft: rgba(35, 40, 63, 0.06);
  --moonarrow-color-hero-indicator: rgba(255, 255, 255, 0.45);
  --moonarrow-color-nav-deep: #1d2136;
  --moonarrow-color-nav-text: #fff;
  --moonarrow-color-nav-line: #e2e4e9;
  --moonarrow-color-nav-active: rgba(35, 40, 63, 0.06);
  --moonarrow-color-nav-light-surface: #fff;
  --moonarrow-color-nav-dropdown-surface: var(--moonarrow-color-paper);
  --moonarrow-color-nav-link: var(--moonarrow-color-brand-ink);
  --moonarrow-color-nav-logo-tile: var(--moonarrow-color-nav-deep);
  --moonarrow-color-nav-hover: var(--moonarrow-color-brand-blue-soft);
  --moonarrow-color-nav-dropdown-line: var(--moonarrow-color-storefront-line);
  --moonarrow-color-nav-toggle-surface: var(--moonarrow-color-paper);
  --moonarrow-color-nav-toggle-stroke: var(--moonarrow-color-nav-deep);
  --moonarrow-color-nav-mobile-panel: var(--moonarrow-color-paper);
  --moonarrow-color-nav-mobile-action: var(--moonarrow-color-paper);
  --moonarrow-color-nav-mobile-line: var(--moonarrow-color-storefront-line);
  --moonarrow-color-footer-surface: #fff;
  --moonarrow-color-footer-raised: var(--moonarrow-color-paper);
  --moonarrow-color-footer-text: var(--moonarrow-color-brand-ink);
  --moonarrow-color-footer-muted: var(--moonarrow-color-storefront-muted);
  --moonarrow-color-footer-line: var(--moonarrow-color-storefront-line);
  --moonarrow-color-storefront-hero-surface: linear-gradient(145deg, var(--moonarrow-color-daylight-wash-top), var(--moonarrow-color-daylight-wash));
  --moonarrow-color-storefront-hero-line: rgba(189, 145, 87, 0.32);
  --moonarrow-color-storefront-card-hover-line: #c3c7d2;
  --moonarrow-color-storefront-media-surface: var(--moonarrow-color-daylight-media);
  --moonarrow-color-admin-utility-surface: var(--moonarrow-color-ice-page);
  --moonarrow-color-admin-utility-text: var(--moonarrow-color-brand-ink-soft);
  --moonarrow-color-admin-search-surface: var(--moonarrow-color-paper);

  --moonarrow-color-paper: #fff;
  --moonarrow-color-storefront-canvas: #fff;
  --moonarrow-color-admin-canvas: #f3f4f6;
  --moonarrow-color-storefront-soft: #f3f4f6;
  --moonarrow-color-admin-soft: #eceef2;
  --moonarrow-color-storefront-line: #e2e4e9;
  --moonarrow-color-admin-line: #d8dbe2;
  --moonarrow-color-content-line: #e2e4e9;
  --moonarrow-color-storefront-muted: #5b6072;
  --moonarrow-color-admin-muted: #5f6577;
  --moonarrow-color-content-muted: #5b6072;

  --moonarrow-color-success: #0a664d;
  --moonarrow-color-admin-success: #168765;
  --moonarrow-color-danger: #97313b;
  --moonarrow-color-notice-danger-surface: #fff0f1;
  --moonarrow-color-notice-warning-surface: #fff5dd;
  --moonarrow-color-notice-warning-ink: #79530b;
  --moonarrow-color-notice-info-surface: #eaf3ff;
  --moonarrow-color-admin-danger: #b8474f;

  --moonarrow-shadow-storefront: 0 12px 30px rgba(29, 33, 54, 0.08);
  --moonarrow-shadow-admin: 0 10px 24px rgba(29, 33, 54, 0.06);
  --moonarrow-shadow-sm: 0 4px 14px rgba(29, 33, 54, 0.06);
  --moonarrow-shadow-card: 0 14px 32px rgba(29, 33, 54, 0.1);
  --moonarrow-shadow-elevated: 0 18px 40px rgba(17, 20, 42, 0.14);
  --moonarrow-shadow-hero-media: 0 10px 24px rgba(29, 33, 54, 0.06);
  --moonarrow-shadow-hero-frame: 0 1px 2px rgba(16, 24, 40, 0.06), 0 34px 64px -24px rgba(16, 32, 64, 0.38);
  --moonarrow-shadow-hero-poster: 0 18px 30px -18px rgba(16, 24, 48, 0.35), 0 50px 90px -40px rgba(16, 24, 48, 0.5);
  --moonarrow-shadow-hero-action: 0 12px 24px -14px rgba(17, 20, 42, 0.55);
  --moonarrow-shadow-lockup: 0 0 0 1px rgba(29, 33, 54, 0.08), 0 10px 24px rgba(29, 33, 54, 0.1);
  --moonarrow-shadow-navigation: 0 0.5rem 1.5rem rgba(17, 20, 42, 0.16);
  --moonarrow-shadow-navigation-light: 0 1px 0 rgba(29, 33, 54, 0.06);
  --moonarrow-focus-ring-navigation: 0 0 0 3px rgba(35, 40, 63, 0.3);
  --moonarrow-shadow-footer: 0 -0.35rem 1rem rgba(35, 40, 63, 0.04);

  --moonarrow-type-micro: max(0.8125rem, 13px);
  --moonarrow-type-metadata: max(0.875rem, 14px);
  --moonarrow-type-label: max(0.875rem, 14px);
  --moonarrow-type-small: max(0.875rem, 14px);
  --moonarrow-type-compact: max(0.875rem, 14px);
  --moonarrow-type-control: max(0.9375rem, 15px);
  --moonarrow-type-support: max(0.9375rem, 15px);
  --moonarrow-type-body: max(1rem, 16px);
  --moonarrow-type-value: max(1rem, 16px);
  --moonarrow-type-card-meta: max(0.8125rem, 13px);
  --moonarrow-type-card-title: max(0.9375rem, 15px);
  --moonarrow-type-card-price: max(1rem, 16px);
  --moonarrow-type-policy: max(1rem, 16px);
  --moonarrow-type-page-title: clamp(1.75rem, 2.6vw, 2.5rem);
  --moonarrow-type-section-title: clamp(1.375rem, 2vw, 1.875rem);
  --moonarrow-type-admin-page-title: clamp(1.5rem, 1.6vw, 1.85rem);
  /* Performance-editorial scale (storefront redesign): oversized display, index numerals, tracked latin kickers. */
  --moonarrow-type-display-hero: clamp(2.5rem, 5.6vw, 5.25rem);
  --moonarrow-type-display-section: clamp(1.75rem, 3.2vw, 2.75rem);
  --moonarrow-type-display-statement: clamp(2.25rem, 5vw, 4.25rem);
  --moonarrow-type-index-numeral: clamp(2.75rem, 5vw, 4.25rem);
  --moonarrow-type-kicker: max(0.75rem, 12px);
  --moonarrow-tracking-kicker: 0.32em;
  --moonarrow-tracking-action: 0.18em;
  --moonarrow-space-section: clamp(4.5rem, 9vw, 8.5rem);

  --moonarrow-space-1: 0.25rem;
  --moonarrow-space-2: 0.5rem;
  --moonarrow-space-3: 0.75rem;
  --moonarrow-space-4: 1rem;
  --moonarrow-space-5: 1.5rem;
  --moonarrow-space-6: 2rem;
  --moonarrow-space-8: 3rem;
  --moonarrow-section-gap: clamp(1.5rem, 3vw, 2.5rem);
  --moonarrow-panel-padding: clamp(0.75rem, 1.5vw, 1.25rem);
  --moonarrow-stack-gap: clamp(0.5rem, 1vw, 0.9rem);
  --moonarrow-inline-gap: clamp(0.35rem, 0.8vw, 0.65rem);

  --moonarrow-surface-canvas: var(--moonarrow-color-storefront-canvas);
  --moonarrow-surface-paper: var(--moonarrow-color-paper);
  --moonarrow-surface-soft: var(--moonarrow-color-storefront-soft);
  --moonarrow-surface-raised: #ffffff;
  --moonarrow-radius-panel: 6px;
  --moonarrow-radius-card: 6px;
  --moonarrow-radius-pill: 999px;
  /* Storefront frames (panels, cards, notices, table rows, option cards, steppers) share one corner radius so
     nested boxes never mix rounded and square edges. Pills and circles keep --moonarrow-radius-pill / 50%. */
  --moonarrow-radius-frame: 4px;

  /* Motion envelope: attack = interaction feedback, sustain = reveals, reverb = brand storytelling only. */
  --moonarrow-motion-attack: 160ms;
  --moonarrow-motion-sustain: 560ms;
  --moonarrow-motion-reverb: 1200ms;
  --moonarrow-motion-curtain: 900ms;
  --moonarrow-ease-attack: cubic-bezier(0.2, 0.9, 0.3, 1);
  --moonarrow-ease-decay: cubic-bezier(0.16, 1, 0.3, 1);
  --moonarrow-ease-curtain: cubic-bezier(0.7, 0, 0.2, 1);
  --moonarrow-motion-fast: 140ms;
  --moonarrow-motion-base: 220ms;
  --moonarrow-motion-slow: 420ms;
  --moonarrow-motion-reveal: var(--moonarrow-motion-sustain);
  --moonarrow-motion-quiet: 220ms;
  --moonarrow-motion-hero-text: 720ms;
  --moonarrow-motion-hero-media: 1100ms;
  --moonarrow-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --moonarrow-motion-reveal-ease: var(--moonarrow-ease-decay);
  --moonarrow-motion-distance: 12px;
  --moonarrow-motion-reveal-distance: 28px;
  --moonarrow-motion-quiet-distance: 8px;
  --moonarrow-motion-media-scale: 1.06;
  --moonarrow-motion-stagger-step: 70ms;
  --moonarrow-motion-stagger-cap: 420ms;
  /* Written reveal: one glyph fades in over this time; each written element finishes within the cap. */
  --moonarrow-motion-write-glyph: 520ms;
  --moonarrow-motion-write-cap: 2200ms;
  --moonarrow-intro-duration: 1400ms;
  --moonarrow-intro-offset: 0ms;
  --moonarrow-carousel-interval: 6000ms;

  --moonarrow-content-max: 1320px;
  --moonarrow-admin-max: 1440px;
  --moonarrow-reading-measure: 70ch;
  --moonarrow-page-gutter: clamp(1rem, 3vw, 2rem);
  --moonarrow-admin-workspace-min: 72px;
  --moonarrow-admin-dense-padding: 0.75rem;
  --moonarrow-admin-dense-gap: 0.5rem;
  --moonarrow-admin-empty-min: 8rem;

  --moonarrow-control-radius: 4px;
  --moonarrow-button-height: 48px;
  --moonarrow-compact-control-height: 44px;
  --moonarrow-field-height: 48px;
  --moonarrow-control-border: #d3d6de;
  --moonarrow-control-border-hover: #a9aebc;
  --moonarrow-control-placeholder: #6c7183;
  --moonarrow-control-readonly: #f3f4f6;
  --moonarrow-focus-ring: 0 0 0 3px rgba(35, 40, 63, 0.24);

  --moonarrow-color-legacy-store-ink: #1d2136;
  --moonarrow-color-legacy-store-muted: #5b6072;
  --moonarrow-color-legacy-store-line: #e2e4e9;
  --moonarrow-color-legacy-store-soft: #f3f4f6;
  --moonarrow-color-legacy-store-accent: #87622f;

  /* Aliases still consumed by legacy admin rules in moonarrow-fidelity.css (moved here from that file). */
  --moonarrow-fidelity-blue: var(--moonarrow-color-brand-blue);
  --moonarrow-fidelity-blue-dark: var(--moonarrow-color-brand-blue-dark);
  --moonarrow-fidelity-ink: var(--moonarrow-color-brand-ink);
  --moonarrow-fidelity-muted: var(--moonarrow-color-storefront-muted);
  --moonarrow-fidelity-line: var(--moonarrow-color-storefront-line);
  --moonarrow-fidelity-soft-line: #eceef2;
  --moonarrow-fidelity-ice: var(--moonarrow-color-ice-page);
  --moonarrow-fidelity-paper: #fff;
  --moonarrow-fidelity-page-gutter: clamp(1.25rem, 4.85vw, 3.375rem);

  --moonarrow-navigation-height: 76px;
  --moonarrow-navigation-item-height: 75px;
  --moonarrow-navigation-link-size: 14px;
  --moonarrow-navigation-brand-gap: clamp(1.25rem, 3vw, 3rem);
  --moonarrow-navigation-item-gap: clamp(0.1rem, 0.55vw, 0.45rem);
  --moonarrow-shell-max: 1440px;
  --moonarrow-shell-gutter: clamp(1rem, 3vw, 2.5rem);
}

/* Storefront frames (panels, cards, summaries) get more breathing room than dense admin panels,
   so text never sits against a border. Administration keeps the :root value. */
.storefront-surface {
  --moonarrow-panel-padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

@media (max-width: 767.98px) {
  .storefront-surface {
    --moonarrow-panel-padding: 1.125rem;
  }
}

/* Shared responsive contract for every storefront and administration page. */
@media (max-width: 767.98px) {
  :root {
    --moonarrow-fidelity-page-gutter: 20px;
    --moonarrow-page-gutter: 1rem;
    --moonarrow-panel-padding: clamp(0.875rem, 4vw, 1.125rem);
    --moonarrow-stack-gap: 0.75rem;
    --moonarrow-inline-gap: 0.5rem;
    --moonarrow-button-height: 44px;
    --moonarrow-compact-control-height: 44px;
    --moonarrow-field-height: 44px;
    --moonarrow-type-page-title: clamp(1.75rem, 7.2vw, 2rem);
    --moonarrow-type-section-title: clamp(1.25rem, 5.6vw, 1.5rem);
    --moonarrow-type-admin-page-title: clamp(1.5rem, 6.5vw, 1.875rem);
    --moonarrow-admin-dense-padding: 0.625rem;
    --moonarrow-admin-dense-gap: 0.5rem;
    --moonarrow-motion-sustain: 420ms;
    --moonarrow-motion-curtain: 700ms;
    --moonarrow-motion-hero-text: 480ms;
    --moonarrow-motion-hero-media: 800ms;
    --moonarrow-motion-reveal-distance: 16px;
    --moonarrow-motion-stagger-step: 50ms;
    --moonarrow-motion-stagger-cap: 250ms;
    --moonarrow-intro-duration: 800ms;
  }
}

@media (max-width: 359.98px) {
  :root {
    --moonarrow-page-gutter: 0.875rem;
    --moonarrow-panel-padding: 0.875rem;
  }
}