/* Storefront design tokens. Loaded once by the Shop layout and builder canvas.
 * Change shared defaults here; keep component state and image geometry local.
 * Authored page styles may override these variables on their own page root.
 */
:root {
    /* Shared motion: interactions decelerate toward their final state. */
    --sf-motion-easing: ease-out;

    /* Typography */
    --sf-font-body:
        "PingFang SC", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1",
        "Microsoft Yahei", tahoma, arial, "\5B8B\4F53";
    --sf-font-display: var(--sf-font-body);
    --sf-font-content: var(--sf-font-body);

    /* RGB channels keep Tailwind's opacity modifiers working. */
    --sf-color-primary: 6 12 59;
    --sf-color-soft: 246 242 235;
    --sf-color-success: 64 153 74;
    --sf-color-info: 0 68 242;
    --sf-color-danger: 248 81 86;

    /* Shared surfaces, text and interactions */
    --sf-surface: #fff;
    --sf-surface-muted: #f8fafc;
    --sf-heading: #082641;
    --sf-catalog-heading: #09243e;
    --sf-muted: #738395;
    --sf-border: #e9eef2;
    --sf-focus: #1687b1;
    --sf-brand: #f58216;
    --sf-brand-hover: #df6d07;
    --sf-brand-strong: #d96500;
    --sf-action: #3da926;
    --sf-action-hover: #2c8d19;

    /* Neutral showcase palette: homepage, navigation and shared footer. */
    --sf-text: #272826;
    --sf-text-muted: #737570;
    --sf-text-subtle: #929589;
    --sf-surface-warm: #f8f8f5;
    --sf-surface-soft: #eeefea;
    --sf-surface-navigation: #dededb;
    --sf-surface-menu: #f3f3ef;
    --sf-surface-contact: #e5e6df;
    --sf-surface-footer: #e1e3dc;
    --sf-hero-start: #e1e1e4;
    --sf-hero-end: #f8f8f8;
    --sf-border-warm: #dadcd3;
    --sf-border-strong: #cdceca;
    --sf-border-footer: #cbd0c2;
    --sf-progress-track: #b6b8b0;

    /* Catalogue, forms and the earlier story layout. */
    --sf-surface-tint: #f0f5f8;
    --sf-border-control: #d9e2eb;
    --sf-link: #0b6c94;
    --sf-story-accent: #398865;
    --sf-story-text: #52796c;
    --sf-story-surface: #f0f6f3;
    --sf-consultation-heading: #133e4a;
    --sf-consultation-text: #172c3e;
    --sf-consultation-link: #206579;
    --sf-error-text: #a52b2b;
    --sf-skeleton-base: #f6f6f6;
    --sf-skeleton-highlight: #f0f0f0;
    --sf-disabled: #e6e7eb;
    --sf-primary-hover: rgb(var(--sf-color-primary) / 5%);

    /* Shared shadows; components own their geometry, not literal colours. */
    --sf-shadow-menu: 0 10px 30px rgb(0 0 0 / 7%);
    --sf-shadow-mobile-menu: 0 20px 30px rgb(0 0 0 / 7%);
    --sf-shadow-partners: 0 8px 40px rgb(39 40 38 / 2%);
    --sf-shadow-hero-title: 0 0 30px rgb(0 0 0 / 5%);
    --sf-shadow-navigation: 0 6px 20px rgb(39 40 38 / 10%);
    --sf-shadow-navigation-idle: 0 6px 20px transparent;
    --sf-shadow-dropdown: 0 16px 40px rgb(9 36 62 / 13%);
    --sf-shadow-input: inset 0 1px 3px rgb(9 36 62 / 3%);
    --sf-shadow-megamenu: 0 24px 45px -15px rgb(8 38 65 / 19%);
    --sf-shadow-mobile-navigation: 0 22px 35px -15px rgb(8 38 65 / 19%);
    --sf-shadow-consultation: 0 14px 55px rgb(16 46 61 / 20%);

    /* Shared buttons */
    --sf-button-bg: #ff4742;
    --sf-button-color: var(--sf-surface);
    --sf-button-border: var(--sf-button-bg);
    --sf-button-hover-bg: transparent;
    --sf-button-hover-color: var(--sf-button-bg);
    --sf-button-shadow: rgb(0 0 0 / 10%) 1px 2px 4px;

    /* Layout and component shape */
    --sf-content-width: 1320px;
    --sf-gutter: clamp(1.125rem, 3vw, 4rem);
    --sf-gap: clamp(1rem, 2.4vw, 2.5rem);
    --sf-section-space: clamp(2.75rem, 6vw, 6.25rem);
    --sf-radius-sm: 4px;
    --sf-radius-md: 8px;
    --sf-radius-card: 22px;
    --sf-radius-card-mobile: 18px;
    --sf-shadow-card:
        0 24px 44px -25px rgb(14 37 61 / 28%), 0 2px 5px rgb(14 37 61 / 2.5%);
    --sf-shadow-card-hover: 0 30px 50px -22px rgb(14 37 61 / 30%);

    /* Published Longmai pages keep their existing variable names. The shared
     * header can use them even when there is no homepage layout ancestor. */
    --lm-gutter: var(--sf-gutter);
    --lm-gap: var(--sf-gap);
    --lm-section-space: var(--sf-section-space);
    --lm-copy-basis: 28rem;
    --lm-visual-basis: 30rem;
    --lm-card-basis: 17rem;
    --lm-media-gap: 0.875rem;
    --lmr-orange: var(--sf-brand);
    --lmr-ink: var(--sf-text);
    --lmr-muted: var(--sf-text-muted);
    --lmr-surface: var(--sf-surface-warm);
    --lmr-hero-surface: var(--sf-hero-start);
    --lmr-copy: var(--sf-text-muted);
}