/* =========================================================
   BudApproach – Design System Foundation
   Version: 0.1.0
   Status: Draft for BA-02 checkpoint 40%
   Scope: tokens + safe reusable layout utilities
   ========================================================= */

:root {
    /* -----------------------------------------------------
       Brand colors

       Source-derived values already used by Catalog Tabs:
       - brand green: #183d32
       - accent gold: #f4c542
       - muted text: #656565

       Other semantic colors below are foundation proposals
       and require LocalWP visual QA before promotion.
       ----------------------------------------------------- */
    --ba-color-brand: #183d32;
    --ba-color-brand-hover: #245547;
    --ba-color-brand-soft: #e8f0ed;
    --ba-color-accent: #f4c542;
    --ba-color-accent-soft: #fff6d6;

    --ba-color-heading: var(--ba-color-brand);
    --ba-color-text: #303835;
    --ba-color-text-muted: #656565;
    --ba-color-surface: #ffffff;
    --ba-color-surface-soft: #f7f9f8;
    --ba-color-border: #dce4e0;
    --ba-color-focus: var(--ba-color-brand);
    --ba-color-danger: #b42318;
    --ba-color-success: #2f7d4a;

    /* Typography: inherit WoodMart font ownership. */
    --ba-font-family-body: inherit;
    --ba-font-family-heading: inherit;
    --ba-font-size-xs: 0.75rem;
    --ba-font-size-sm: 0.875rem;
    --ba-font-size-md: 1rem;
    --ba-font-size-lg: 1.125rem;
    --ba-font-size-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --ba-font-size-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --ba-font-size-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
    --ba-line-height-tight: 1.2;
    --ba-line-height-body: 1.65;
    --ba-line-height-relaxed: 1.8;

    /* 4px-based spacing scale. */
    --ba-space-1: 4px;
    --ba-space-2: 8px;
    --ba-space-3: 12px;
    --ba-space-4: 16px;
    --ba-space-5: 24px;
    --ba-space-6: 32px;
    --ba-space-7: 40px;
    --ba-space-8: 48px;
    --ba-space-9: 64px;
    --ba-space-10: 80px;

    /* Semantic spacing aliases. */
    --ba-layout-page-x: clamp(16px, 3vw, 32px);
    --ba-layout-column-gap: clamp(32px, 4vw, 64px);
    --ba-layout-section-gap: clamp(40px, 6vw, 80px);
    --ba-layout-region-gap: clamp(24px, 3vw, 40px);
    --ba-layout-control-gap: clamp(12px, 2vw, 24px);
    --ba-layout-content-measure: 860px;

    /* Shape and elevation. */
    --ba-radius-sm: 4px;
    --ba-radius-md: 8px;
    --ba-radius-lg: 12px;
    --ba-radius-pill: 999px;
    --ba-shadow-sm: 0 4px 14px rgba(24, 61, 50, 0.12);
    --ba-shadow-md: 0 10px 30px rgba(24, 61, 50, 0.16);

    /* Motion. Respect reduced-motion rules below. */
    --ba-duration-fast: 160ms;
    --ba-duration-normal: 240ms;
    --ba-easing-standard: ease;

    /* Documentation aliases. CSS variables cannot drive media queries. */
    --ba-breakpoint-mobile: 767px;
    --ba-breakpoint-tablet: 1024px;
}

/* ---------------------------------------------------------
   Safe layout utilities

   These classes do not replace WoodMart buttons, forms,
   product cards, archive products, cart, or checkout UI.
   --------------------------------------------------------- */

.ba-section {
    padding-block: var(--ba-section-padding, var(--ba-layout-section-gap));
}

.ba-section--compact {
    --ba-section-padding: var(--ba-layout-region-gap);
}

.ba-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ba-stack-gap, var(--ba-space-5));
}

.ba-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ba-cluster-gap, var(--ba-layout-control-gap));
}

.ba-flow > * {
    margin-block: 0;
}

.ba-flow > * + * {
    margin-block-start: var(--ba-flow-gap, 1em);
}

.ba-content-shell {
    width: min(100%, var(--ba-content-measure, var(--ba-layout-content-measure)));
    margin-inline: auto;
}

.ba-surface {
    padding: var(--ba-surface-padding, var(--ba-space-6));
    border: 1px solid var(--ba-color-border);
    border-radius: var(--ba-surface-radius, var(--ba-radius-lg));
    background: var(--ba-color-surface);
    box-shadow: var(--ba-surface-shadow, none);
}

.ba-surface--soft {
    background: var(--ba-color-surface-soft);
}

.ba-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ba-focusable:focus-visible {
    outline: 2px solid var(--ba-color-focus) !important;
    outline-offset: 4px;
}

/* ---------------------------------------------------------
   Archive token bridge

   BA-03 already established these macro-layout values. This
   bridge promotes them into BA-02 semantic tokens without
   changing Catalog Tabs behavior or Product Card styling.
   --------------------------------------------------------- */

.ba-archive-shell {
    --ba-archive-sidebar-size: clamp(230px, 16vw, 280px);
    --ba-archive-column-gap: var(--ba-layout-column-gap);
    --ba-archive-section-gap: var(--ba-layout-region-gap);
    --ba-archive-tools-gap: var(--ba-layout-control-gap);
}

@media (max-width: 1024px) {
    :root {
        --ba-layout-section-gap: clamp(32px, 5vw, 56px);
        --ba-layout-region-gap: clamp(20px, 3vw, 32px);
    }
}

@media (max-width: 767px) {
    :root {
        --ba-layout-page-x: 16px;
        --ba-layout-section-gap: 32px;
        --ba-layout-region-gap: 24px;
        --ba-layout-control-gap: 16px;
    }

    .ba-surface {
        --ba-surface-padding: var(--ba-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ba-duration-fast: 0ms;
        --ba-duration-normal: 0ms;
    }

    .ba-focusable {
        scroll-behavior: auto;
    }
}