/* =========================================================
   M A ENTERPRISE — DESIGN SYSTEM
   =========================================================
   Foundation tokens, typography, and reusable component
   classes for the premium B2B redesign. Loaded before
   ecommerce.css and product-cards.css so legacy page-specific
   rules can still apply during the page-by-page rollout.

   DESIGN DIRECTION
   Subject: marine & industrial spare parts — bearings, valves,
   motors, fittings. The palette draws from oxidized steel,
   deep marine teal, and brass fittings rather than generic
   "premium SaaS" pastels. Part numbers and specs are treated
   as a typographic signature (monospace, stamped-plate feel),
   reflecting how this industry actually identifies products —
   by exact part number, not lifestyle imagery.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{

    /* ===== CORE PALETTE ===== */
    --ink:#0F2027;              /* near-black navy — headings, dark surfaces */
    --deep-teal:#1B4954;        /* primary brand — darker, more confident than legacy teal */
    --marine-teal:#3D7A82;      /* secondary / interactive */
    --marine-teal-light:#5C969D;
    --brass:#C8923A;            /* accent — brass fitting gold, used sparingly */
    --brass-light:#E0B266;
    --signal-red:#C23B33;       /* danger / out-of-stock — muted brick, not candy red */
    --signal-green:#1F7A44;     /* success / in-stock */
    --steel-50:#F4F6F7;         /* page background — cool steel-grey, not warm cream */
    --steel-100:#EBEEF0;
    --steel-200:#DCE2E5;        /* borders */
    --steel-400:#9AA7AC;        /* muted text */
    --white:#FFFFFF;

    /* ===== LEGACY TOKEN BRIDGE =====
       Existing pages (about, contact, products,
       order-confirmation, index, request-quote) reference
       --store-* tokens directly. Remapping them here upgrades
       every existing page's color usage instantly without
       touching that page's markup. */
    --store-primary:var(--marine-teal);
    --store-dark:var(--deep-teal);
    --store-accent:var(--brass);
    --store-success:var(--signal-green);
    --store-danger:var(--signal-red);
    --store-text:var(--ink);
    --store-muted:#5B6A70;
    --store-bg:var(--steel-50);
    --store-border:var(--steel-200);
    --store-white:var(--white);

    /* ===== TYPE ===== */
    --font-display:'Archivo', sans-serif;     /* headings — engineered, condensed character */
    --font-body:'Public Sans', sans-serif;    /* body copy — technical-document legibility */
    --font-mono:'IBM Plex Mono', monospace;   /* part numbers, prices, SKUs — stamped-plate feel */

    /* ===== TYPE SCALE ===== */
    --text-xs:12px;
    --text-sm:13.5px;
    --text-base:15px;
    --text-md:17px;
    --text-lg:20px;
    --text-xl:26px;
    --text-2xl:34px;
    --text-3xl:44px;

    /* ===== SPACING SCALE (4px base) ===== */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;

    /* ===== RADIUS ===== */
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-full:999px;

    /* ===== SHADOW ===== */
    --shadow-sm:0 1px 2px rgba(15,32,39,.06);
    --shadow-md:0 6px 20px rgba(15,32,39,.08);
    --shadow-lg:0 18px 40px rgba(15,32,39,.14);
    --shadow-focus:0 0 0 3px rgba(61,122,130,.35);

    /* ===== MOTION ===== */
    --ease:cubic-bezier(.4,0,.2,1);
    --duration-fast:150ms;
    --duration-base:220ms;
}

/* =========================================================
   SIGNATURE ELEMENT: CHAMFERED CORNER
   A single diagonal-cut corner, like a machined steel plate.
   Used sparingly — on the hero panel and featured cards only,
   never decoratively repeated across every component. This is
   the one deliberate visual risk in the system.
   ========================================================= */

.chamfer{
    clip-path:polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.chamfer-sm{
    clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */

.ds-h1, .ds-h2, .ds-h3{
    font-family:var(--font-display);
    color:var(--ink);
    letter-spacing:-.01em;
    line-height:1.15;
    margin:0;
}

.ds-h1{ font-size:var(--text-3xl); font-weight:800; }
.ds-h2{ font-size:var(--text-2xl); font-weight:700; }
.ds-h3{ font-size:var(--text-lg); font-weight:700; }

.ds-eyebrow{
    font-family:var(--font-mono);
    font-size:var(--text-xs);
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--brass);
    display:block;
    margin-bottom:var(--space-2);
}

.ds-mono{
    font-family:var(--font-mono);
    font-weight:600;
    letter-spacing:.01em;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.ds-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    font-family:var(--font-body);
    font-weight:700;
    font-size:var(--text-base);
    padding:13px 22px;
    border-radius:var(--radius-md);
    border:1.5px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform var(--duration-fast) var(--ease),
               box-shadow var(--duration-fast) var(--ease),
               background var(--duration-base) var(--ease),
               border-color var(--duration-base) var(--ease);
    line-height:1.2;
}

.ds-btn:focus-visible{
    outline:none;
    box-shadow:var(--shadow-focus);
}

.ds-btn-primary{
    background:var(--deep-teal);
    color:var(--white);
}
.ds-btn-primary:hover{
    background:var(--ink);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.ds-btn-accent{
    background:var(--brass);
    color:var(--ink);
}
.ds-btn-accent:hover{
    background:var(--brass-light);
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.ds-btn-outline{
    background:transparent;
    border-color:var(--steel-200);
    color:var(--ink);
}
.ds-btn-outline:hover{
    border-color:var(--deep-teal);
    color:var(--deep-teal);
}

.ds-btn-ghost{
    background:transparent;
    color:var(--deep-teal);
    padding:13px 14px;
}
.ds-btn-ghost:hover{
    background:var(--steel-100);
}

.ds-btn:disabled,
.ds-btn[disabled]{
    opacity:.5;
    cursor:not-allowed;
    transform:none !important;
    box-shadow:none !important;
}

.ds-btn-sm{
    padding:9px 14px;
    font-size:var(--text-sm);
}

.ds-btn-block{
    width:100%;
}

/* =========================================================
   CARDS
   ========================================================= */

.ds-card{
    background:var(--white);
    border:1px solid var(--steel-200);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--duration-base) var(--ease),
               transform var(--duration-base) var(--ease),
               border-color var(--duration-base) var(--ease);
}

.ds-card-interactive:hover{
    box-shadow:var(--shadow-lg);
    transform:translateY(-4px);
    border-color:var(--steel-200);
}

.ds-card-featured{
    border-color:var(--deep-teal);
}

/* =========================================================
   BADGES
   ========================================================= */

.ds-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:5px 10px;
    border-radius:var(--radius-full);
    line-height:1;
}

.ds-badge-success{
    background:#E8F5EC;
    color:var(--signal-green);
}

.ds-badge-danger{
    background:#FAEAE9;
    color:var(--signal-red);
}

.ds-badge-accent{
    background:#FBF1E2;
    color:#8A6420;
}

.ds-badge-neutral{
    background:var(--steel-100);
    color:var(--store-muted);
}

/* =========================================================
   FORMS
   ========================================================= */

.ds-field{
    display:grid;
    gap:7px;
    margin-bottom:var(--space-4);
}

.ds-label{
    font-family:var(--font-body);
    font-size:var(--text-sm);
    font-weight:700;
    color:var(--ink);
}

.ds-input,
.ds-select,
.ds-textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:var(--text-base);
    padding:12px 14px;
    border:1.5px solid var(--steel-200);
    border-radius:var(--radius-md);
    background:var(--white);
    color:var(--ink);
    transition:border-color var(--duration-base) var(--ease),
               box-shadow var(--duration-base) var(--ease);
    box-sizing:border-box;
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus{
    outline:none;
    border-color:var(--marine-teal);
    box-shadow:var(--shadow-focus);
}

.ds-textarea{
    resize:vertical;
    min-height:110px;
}

.ds-checkbox,
.ds-radio{
    width:17px;
    height:17px;
    accent-color:var(--deep-teal);
    cursor:pointer;
}

/* Switch */
.ds-switch{
    position:relative;
    display:inline-block;
    width:42px;
    height:24px;
}
.ds-switch input{
    opacity:0;
    width:0;
    height:0;
}
.ds-switch-track{
    position:absolute;
    inset:0;
    background:var(--steel-200);
    border-radius:var(--radius-full);
    cursor:pointer;
    transition:background var(--duration-base) var(--ease);
}
.ds-switch-track::before{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:var(--white);
    border-radius:50%;
    transition:transform var(--duration-base) var(--ease);
    box-shadow:var(--shadow-sm);
}
.ds-switch input:checked + .ds-switch-track{
    background:var(--deep-teal);
}
.ds-switch input:checked + .ds-switch-track::before{
    transform:translateX(18px);
}

/* =========================================================
   TABLES
   ========================================================= */

.ds-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--font-body);
    font-size:var(--text-sm);
}

.ds-table th{
    text-align:left;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--store-muted);
    padding:12px 16px;
    border-bottom:2px solid var(--steel-200);
}

.ds-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--steel-100);
    color:var(--ink);
}

.ds-table tbody tr{
    transition:background var(--duration-fast) var(--ease);
}

.ds-table tbody tr:hover{
    background:var(--steel-50);
}

/* =========================================================
   ALERTS
   ========================================================= */

.ds-alert{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:14px 16px;
    border-radius:var(--radius-md);
    font-size:var(--text-sm);
    font-weight:600;
    border:1px solid transparent;
}

.ds-alert-success{
    background:#EAFAF0;
    border-color:#BFE8CF;
    color:#1F7A44;
}

.ds-alert-danger{
    background:#FDECEC;
    border-color:#F3BCBC;
    color:#9C2B2B;
}

.ds-alert-info{
    background:#EAF3F5;
    border-color:#C7DEE2;
    color:var(--deep-teal);
}

/* =========================================================
   TOASTS
   ========================================================= */

.ds-toast-stack{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:2000;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:340px;
}

.ds-toast{
    background:var(--ink);
    color:var(--white);
    padding:14px 16px;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    font-size:var(--text-sm);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    transform:translateY(12px);
    opacity:0;
    animation:ds-toast-in var(--duration-base) var(--ease) forwards;
}

@keyframes ds-toast-in{
    to{ transform:translateY(0); opacity:1; }
}

.ds-toast-success{ background:var(--signal-green); }
.ds-toast-danger{ background:var(--signal-red); }

/* =========================================================
   TOOLTIPS
   ========================================================= */

.ds-tooltip{
    position:relative;
}

.ds-tooltip::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) translateY(4px);
    background:var(--ink);
    color:var(--white);
    font-size:11px;
    font-weight:600;
    padding:6px 10px;
    border-radius:var(--radius-sm);
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity var(--duration-fast) var(--ease),
               transform var(--duration-fast) var(--ease);
    z-index:50;
}

.ds-tooltip:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* =========================================================
   ACCORDIONS
   ========================================================= */

.ds-accordion-item{
    border-bottom:1px solid var(--steel-200);
}

.ds-accordion-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:0;
    padding:16px 4px;
    font-family:var(--font-body);
    font-size:var(--text-base);
    font-weight:700;
    color:var(--ink);
    cursor:pointer;
    text-align:left;
}

.ds-accordion-trigger svg{
    flex-shrink:0;
    transition:transform var(--duration-base) var(--ease);
}

.ds-accordion-trigger[aria-expanded="true"] svg{
    transform:rotate(180deg);
}

.ds-accordion-panel{
    max-height:0;
    overflow:hidden;
    transition:max-height var(--duration-base) var(--ease);
}

.ds-accordion-panel.open{
    max-height:600px;
    padding-bottom:16px;
}

.ds-accordion-panel p{
    color:var(--store-muted);
    font-size:var(--text-sm);
    line-height:1.7;
    margin:0;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */

.ds-breadcrumb{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--text-xs);
    color:var(--store-muted);
    margin-bottom:var(--space-5);
    flex-wrap:wrap;
}

.ds-breadcrumb a{
    color:var(--store-muted);
    text-decoration:none;
}

.ds-breadcrumb a:hover{
    color:var(--deep-teal);
}

.ds-breadcrumb-current{
    color:var(--ink);
    font-weight:600;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.ds-pagination{
    display:flex;
    align-items:center;
    gap:6px;
    justify-content:center;
    flex-wrap:wrap;
}

.ds-page-link{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:var(--radius-md);
    border:1.5px solid var(--steel-200);
    color:var(--ink);
    text-decoration:none;
    font-weight:700;
    font-size:var(--text-sm);
    transition:all var(--duration-fast) var(--ease);
}

.ds-page-link:hover{
    border-color:var(--deep-teal);
    color:var(--deep-teal);
}

.ds-page-link.active{
    background:var(--deep-teal);
    border-color:var(--deep-teal);
    color:var(--white);
}

/* =========================================================
   SKELETON LOADERS
   ========================================================= */

.ds-skeleton{
    background:linear-gradient(90deg, var(--steel-100) 25%, var(--steel-200) 37%, var(--steel-100) 63%);
    background-size:400% 100%;
    animation:ds-skeleton-shimmer 1.4s ease infinite;
    border-radius:var(--radius-sm);
}

@keyframes ds-skeleton-shimmer{
    0%{ background-position:100% 50%; }
    100%{ background-position:0 50%; }
}

/* =========================================================
   SPINNER
   ========================================================= */

.ds-spinner{
    width:20px;
    height:20px;
    border:2.5px solid var(--steel-200);
    border-top-color:var(--deep-teal);
    border-radius:50%;
    animation:ds-spin .7s linear infinite;
}

@keyframes ds-spin{
    to{ transform:rotate(360deg); }
}

/* =========================================================
   MODALS
   ========================================================= */

.ds-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,32,39,.55);
    backdrop-filter:blur(2px);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease);
    z-index:1500;
}

.ds-modal-overlay.open{
    opacity:1;
    visibility:visible;
}

.ds-modal{
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    max-width:520px;
    width:92%;
    padding:var(--space-8);
}

/* =========================================================
   SCROLL REVEAL (motion respects prefers-reduced-motion)
   ========================================================= */

.ds-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
}

.ds-reveal.in-view{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    .ds-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
    .ds-skeleton,
    .ds-spinner,
    .ds-toast{
        animation:none;
    }
}

/* =========================================================
   UTILITY
   ========================================================= */

.ds-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.ds-container{
    width:min(1240px, 94%);
    margin:0 auto;
}

/* Visible keyboard focus everywhere, per accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:none;
    box-shadow:var(--shadow-focus);
}