/*
 * IndoSurgicals Desktop Design Foundation — Patch 23 v1.0.0
 * --------------------------------------------------------------------------
 * Scope: desktop only (>= 901px).
 * Purpose: establish shared visual tokens and a single desktop typography
 * foundation before page-by-page desktop beautification begins.
 *
 * IMPORTANT:
 * - No mobile rules are changed here.
 * - No product, cart, search, warranty, CRM or form logic is changed here.
 * - Page-specific layout redesigns belong to later desktop patches.
 */

:root {
    /* Core brand palette */
    --isp-ds-navy: #405365;
    --isp-ds-navy-dark: #273c4d;
    --isp-ds-teal: #008f87;
    --isp-ds-teal-dark: #00746f;
    --isp-ds-mint: #63c4ad;
    --isp-ds-text: #263746;
    --isp-ds-muted: #687986;
    --isp-ds-line: #d8e2e3;
    --isp-ds-line-strong: #c7d5d7;
    --isp-ds-soft: #f4f7f7;
    --isp-ds-soft-alt: #eef4f4;
    --isp-ds-teal-soft: #eaf7f5;
    --isp-ds-white: #ffffff;

    /* Typography */
    --isp-ds-font-sans: 'Poppins', Arial, Helvetica, sans-serif;
    --isp-ds-font-serif: Georgia, 'Times New Roman', serif;
    --isp-ds-font-weight-regular: 400;
    --isp-ds-font-weight-medium: 500;
    --isp-ds-font-weight-semibold: 600;
    --isp-ds-font-weight-bold: 700;
    --isp-ds-font-weight-extrabold: 800;

    /* Desktop layout */
    --isp-ds-content-max: 1200px;
    --isp-ds-reading-max: 760px;
    --isp-ds-gutter: clamp(24px, 3vw, 48px);
    --isp-ds-section-space: clamp(56px, 5vw, 84px);

    /* Spacing scale */
    --isp-ds-space-1: 4px;
    --isp-ds-space-2: 8px;
    --isp-ds-space-3: 12px;
    --isp-ds-space-4: 16px;
    --isp-ds-space-5: 20px;
    --isp-ds-space-6: 24px;
    --isp-ds-space-7: 32px;
    --isp-ds-space-8: 40px;
    --isp-ds-space-9: 48px;
    --isp-ds-space-10: 64px;
    --isp-ds-space-11: 80px;

    /* Shape */
    --isp-ds-radius-sm: 8px;
    --isp-ds-radius-md: 12px;
    --isp-ds-radius-lg: 16px;
    --isp-ds-radius-xl: 20px;
    --isp-ds-radius-2xl: 24px;
    --isp-ds-radius-pill: 999px;

    /* Elevation */
    --isp-ds-shadow-xs: 0 2px 8px rgba(39, 60, 77, .05);
    --isp-ds-shadow-sm: 0 8px 24px rgba(39, 60, 77, .07);
    --isp-ds-shadow-md: 0 14px 36px rgba(39, 60, 77, .09);
    --isp-ds-shadow-lg: 0 22px 54px rgba(39, 60, 77, .12);

    /* Motion */
    --isp-ds-ease: cubic-bezier(.2, .7, .2, 1);
    --isp-ds-duration-fast: 160ms;
    --isp-ds-duration: 220ms;
}

@media (min-width: 901px) {
    /*
     * Keep the legacy stylesheet available for compatibility while making the
     * modern public experience use one consistent desktop typeface.
     */
    html body {
        color: var(--isp-ds-text);
        background: #f5f7f8;
        font-family: var(--isp-ds-font-sans);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Existing chrome variables now resolve from one shared palette. */
    :root {
        --isp-chrome-navy: var(--isp-ds-navy);
        --isp-chrome-navy-dark: var(--isp-ds-navy-dark);
        --isp-chrome-teal: var(--isp-ds-teal);
        --isp-chrome-teal-dark: var(--isp-ds-teal-dark);
        --isp-chrome-mint: var(--isp-ds-mint);
        --isp-chrome-soft: var(--isp-ds-soft);
        --isp-chrome-line: var(--isp-ds-line);
        --isp-chrome-text: var(--isp-ds-text);
        --isp-chrome-muted: var(--isp-ds-muted);
        --isp-chrome-white: var(--isp-ds-white);
        --isp-chrome-width: var(--isp-ds-content-max);
    }

    /* Shared site chrome typography. */
    html body .isp-topbar,
    html body .isp-site-header,
    html body .isp-site-nav,
    html body .isp-site-footer,
    html body .isp-copyright,
    html body .isp-search-suggestions {
        font-family: var(--isp-ds-font-sans);
    }

    /*
     * Normalise the modern public page families. The added html/body
     * specificity intentionally beats older page-level Arial declarations
     * without requiring !important.
     */
    html body .isp-home {
        --isp-home-navy: var(--isp-ds-navy);
        --isp-home-navy-dark: var(--isp-ds-navy-dark);
        --isp-home-teal: #b2edea var(--isp-ds-teal);
        --isp-home-teal-dark: var(--isp-ds-teal-dark);
        --isp-home-mint: var(--isp-ds-mint);
        --isp-home-text: var(--isp-ds-text);
        --isp-home-muted: var(--isp-ds-muted);
        --isp-home-line: var(--isp-ds-line);
        --isp-home-soft: var(--isp-ds-soft);
        --isp-home-teal-soft: var(--isp-ds-teal-soft);
        --isp-home-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-products-directory-page,
    html body .isp-category-page,
    html body .isp-subcategory-page,
    html body .isp-product-page {
        --isp-navy: var(--isp-ds-navy);
        --isp-navy-dark: var(--isp-ds-navy-dark);
        --isp-teal: var(--isp-ds-teal);
        --isp-teal-dark: var(--isp-ds-teal-dark);
        --isp-mint: var(--isp-ds-mint);
        --isp-text: var(--isp-ds-text);
        --isp-muted: var(--isp-ds-muted);
        --isp-line: var(--isp-ds-line);
        --isp-soft: var(--isp-ds-soft);
        --isp-teal-soft: var(--isp-ds-teal-soft);
        --isp-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-info-page {
        --isp-info-navy: var(--isp-ds-navy);
        --isp-info-navy-dark: var(--isp-ds-navy-dark);
        --isp-info-teal: var(--isp-ds-teal);
        --isp-info-teal-dark: var(--isp-ds-teal-dark);
        --isp-info-mint: var(--isp-ds-mint);
        --isp-info-text: var(--isp-ds-text);
        --isp-info-muted: var(--isp-ds-muted);
        --isp-info-line: var(--isp-ds-line);
        --isp-info-soft: var(--isp-ds-soft);
        --isp-info-teal-soft: var(--isp-ds-teal-soft);
        --isp-info-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-enquiry-page {
        --isp-enquiry-navy: var(--isp-ds-navy);
        --isp-enquiry-navy-dark: var(--isp-ds-navy-dark);
        --isp-enquiry-teal: var(--isp-ds-teal);
        --isp-enquiry-teal-dark: var(--isp-ds-teal-dark);
        --isp-enquiry-mint: var(--isp-ds-mint);
        --isp-enquiry-text: var(--isp-ds-text);
        --isp-enquiry-muted: var(--isp-ds-muted);
        --isp-enquiry-line: var(--isp-ds-line);
        --isp-enquiry-soft: var(--isp-ds-soft);
        --isp-enquiry-teal-soft: var(--isp-ds-teal-soft);
        --isp-enquiry-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-testimonial-page {
        --isp-testimonial-navy: var(--isp-ds-navy);
        --isp-testimonial-navy-dark: var(--isp-ds-navy-dark);
        --isp-testimonial-teal: var(--isp-ds-teal);
        --isp-testimonial-teal-dark: var(--isp-ds-teal-dark);
        --isp-testimonial-mint: var(--isp-ds-mint);
        --isp-testimonial-text: var(--isp-ds-text);
        --isp-testimonial-muted: var(--isp-ds-muted);
        --isp-testimonial-line: var(--isp-ds-line);
        --isp-testimonial-soft: var(--isp-ds-soft);
        --isp-testimonial-teal-soft: var(--isp-ds-teal-soft);
        --isp-testimonial-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-exhibition-page {
        --isp-exhibition-navy: var(--isp-ds-navy);
        --isp-exhibition-navy-dark: var(--isp-ds-navy-dark);
        --isp-exhibition-teal: var(--isp-ds-teal);
        --isp-exhibition-teal-dark: var(--isp-ds-teal-dark);
        --isp-exhibition-mint: var(--isp-ds-mint);
        --isp-exhibition-text: var(--isp-ds-text);
        --isp-exhibition-muted: var(--isp-ds-muted);
        --isp-exhibition-line: var(--isp-ds-line);
        --isp-exhibition-soft: var(--isp-ds-soft);
        --isp-exhibition-teal-soft: var(--isp-ds-teal-soft);
        --isp-exhibition-white: var(--isp-ds-white);
        font-family: var(--isp-ds-font-sans);
    }

    html body .isp-catalogue-page,
    html body .isp-exhibition-category-page,
    html body .isp-smart-search-page {
        font-family: var(--isp-ds-font-sans);
    }

    /* Form controls and actions should never fall back to browser fonts. */
    html body .isp-home :is(a, button, input, select, textarea),
    html body .isp-products-directory-page :is(a, button, input, select, textarea),
    html body .isp-category-page :is(a, button, input, select, textarea),
    html body .isp-subcategory-page :is(a, button, input, select, textarea),
    html body .isp-product-page :is(a, button, input, select, textarea),
    html body .isp-info-page :is(a, button, input, select, textarea),
    html body .isp-enquiry-page :is(a, button, input, select, textarea),
    html body .isp-testimonial-page :is(a, button, input, select, textarea),
    html body .isp-exhibition-page :is(a, button, input, select, textarea),
    html body .isp-catalogue-page :is(a, button, input, select, textarea),
    html body .isp-exhibition-category-page :is(a, button, input, select, textarea),
    html body .isp-smart-search-page :is(a, button, input, select, textarea),
    html body .isp-site-header :is(a, button, input, select, textarea),
    html body .isp-site-nav :is(a, button, input, select, textarea),
    html body .isp-site-footer :is(a, button, input, select, textarea) {
        font-family: inherit;
    }

    /* Reusable desktop primitives for the next transformation stages. */
    .isp-ds-container {
        width: min(var(--isp-ds-content-max), calc(100% - (var(--isp-ds-gutter) * 2)));
        margin-inline: auto;
    }

    .isp-ds-reading-width {
        width: min(100%, var(--isp-ds-reading-max));
    }

    .isp-ds-surface {
        background: var(--isp-ds-white);
        border: 1px solid var(--isp-ds-line);
        border-radius: var(--isp-ds-radius-lg);
        box-shadow: var(--isp-ds-shadow-sm);
    }

    .isp-ds-kicker {
        color: var(--isp-ds-teal-dark);
        font-size: 11px;
        line-height: 1.4;
        font-weight: var(--isp-ds-font-weight-extrabold);
        letter-spacing: .12em;
        text-transform: uppercase;
    }

    .isp-ds-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 18px;
        border: 1px solid transparent;
        border-radius: var(--isp-ds-radius-md);
        font-family: var(--isp-ds-font-sans);
        font-size: 13px;
        line-height: 1.25;
        font-weight: var(--isp-ds-font-weight-bold);
        text-decoration: none;
        cursor: pointer;
        transition: transform var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    border-color var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    background var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    color var(--isp-ds-duration-fast) var(--isp-ds-ease),
                    box-shadow var(--isp-ds-duration-fast) var(--isp-ds-ease);
    }

    .isp-ds-button--primary {
        color: var(--isp-ds-white);
        background: var(--isp-ds-teal);
        border-color: var(--isp-ds-teal);
        box-shadow: 0 8px 18px rgba(0, 143, 135, .16);
    }

    .isp-ds-button--primary:hover,
    .isp-ds-button--primary:focus-visible {
        color: var(--isp-ds-white);
        background: var(--isp-ds-teal-dark);
        border-color: var(--isp-ds-teal-dark);
        transform: translateY(-1px);
        box-shadow: 0 12px 26px rgba(0, 116, 111, .20);
    }

    .isp-ds-button--secondary {
        color: var(--isp-ds-navy-dark);
        background: var(--isp-ds-white);
        border-color: var(--isp-ds-line-strong);
    }

    .isp-ds-button--secondary:hover,
    .isp-ds-button--secondary:focus-visible {
        color: var(--isp-ds-teal-dark);
        border-color: #9fcac4;
        background: #f8fcfb;
        transform: translateY(-1px);
    }

    /* Desktop keyboard focus baseline. Mouse users are unaffected. */
    html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
        outline: 3px solid rgba(0, 143, 135, .28);
        outline-offset: 3px;
    }

}

/* Respect reduced-motion preferences for new foundation primitives. */
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .isp-ds-button {
        transition: none;
    }
}