/* ============================================================
   WATEC DESIGN SYSTEM — Block 4 (v1.0.0)
   Single source of truth for design tokens.
   Loaded AFTER watec-b2b-commerce/assets/frontend.css so these
   :root redefinitions win for the legacy --watec-* variables.

   Palette approved by George 2026-08-06 (see
   reports/block4-palette-proposal.html). All text-on-white
   colors verified >= 4.5:1 WCAG AA.
   ============================================================ */

/* ============================================================
   4.2 — COLOR TOKENS
   ============================================================ */
:root {
    /* Brand */
    --w-navy: #1A365D;          /* primary surfaces, headers, footer */
    --w-aqua-dark: #0E7490;     /* text-safe aqua: headings, links (5.36:1) */
    --w-aqua: #51BDE6;          /* decorative ONLY: icons, fills on navy */
    --w-aqua-pale: #C1E6FA;     /* background washes, badges */
    --w-cta: #EB3D0A;           /* the ONE accent — primary buttons only */
    --w-cta-hover: #C2340A;     /* 5.54:1 */

    /* Semantic */
    --w-success: #059669;
    --w-warning: #B45309;       /* 5.9:1 — "Na objednávku", pending */
    --w-error: #B91C1C;         /* 7.0:1 — form errors, failed states */

    /* Neutral ramp */
    --w-ink: #1E293B;           /* high-emphasis text */
    --w-body: #333333;          /* default paragraph text */
    --w-slate: #64748B;         /* secondary text, meta, SKUs */
    --w-line: #E2E8F0;          /* 1px borders, dividers */
    --w-line-light: #F1F5F9;
    --w-bg-soft: #F8FAFC;       /* alternating sections */
    --w-white: #FFFFFF;

    /* Elevation */
    --w-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --w-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --w-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    /* Radii */
    --w-radius-sm: 4px;
    --w-radius: 8px;            /* buttons, inputs */
    --w-radius-card: 12px;      /* cards (4.5) */

    /* Type (4.3) */
    --w-font: 'Geologica', sans-serif;
    --w-h1-size: 40px;  --w-h1-lh: 1.2;
    --w-h2-size: 30px;  --w-h2-lh: 1.25;
    --w-h3-size: 22px;  --w-h3-lh: 1.3;
    --w-body-size: 16.5px; --w-body-lh: 1.6;
    --w-small-size: 14px;

    /* Layout (4.1) */
    --w-container: 1320px;
    --w-gutter: 24px;

    /* Spacing scale (4.6): 4/8/12/16/24/32/48/64/96 */
    --w-space-1: 4px;
    --w-space-2: 8px;
    --w-space-3: 12px;
    --w-space-4: 16px;
    --w-space-5: 24px;
    --w-space-6: 32px;
    --w-space-7: 48px;
    --w-space-8: 64px;
    --w-space-9: 96px;

    --w-transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ------------------------------------------------------------
   LEGACY VARIABLE REMAP
   frontend.css (B2B plugin) consumes --watec-*. Pointing those
   at the new tokens upgrades the whole existing stylesheet
   without touching its 1500 lines.
   ------------------------------------------------------------ */
:root {
    --watec-primary: var(--w-navy);
    --watec-accent: var(--w-aqua-dark);        /* was #51BDE6 — now text-safe */
    --watec-accent-decor: var(--w-aqua);       /* decorative uses only */
    --watec-cta: var(--w-cta);
    --watec-cta-hover: var(--w-cta-hover);     /* was #C41E00 */
    --watec-success: var(--w-success);
    --watec-warning: var(--w-warning);         /* was #D97706 (fails AA) */
    --watec-danger: var(--w-error);            /* was #DC2626 */
    --watec-bg: var(--w-bg-soft);
    --watec-white: var(--w-white);
    --watec-text: var(--w-ink);
    --watec-text-muted: var(--w-slate);
    --watec-border: var(--w-line);
    --watec-border-light: var(--w-line-light);
    --watec-shadow-sm: var(--w-shadow-sm);
    --watec-shadow: var(--w-shadow);
    --watec-shadow-lg: var(--w-shadow-lg);
    --watec-radius-sm: var(--w-radius-sm);
    --watec-radius: var(--w-radius);
    --watec-radius-lg: var(--w-radius-card);
    --watec-transition: var(--w-transition);
}

/* ============================================================
   4.1 — LAYOUT: container 1320px, gutters 24px
   ============================================================ */
.w-container {
    max-width: var(--w-container);
    margin-inline: auto;
    padding-inline: var(--w-gutter);
}

/* Full-width background band with contained content */
.w-band {
    width: 100%;
    background: var(--w-bg-soft);
}
.w-band > .w-container {
    padding-block: var(--w-space-8);
}

/* ============================================================
   4.3 — TYPE: Geologica scale, sentence case
   Plain element selectors = fallback defaults. Elementor kit
   typography (set to the same values) wins wherever configured.
   ============================================================ */
body {
    font-family: var(--w-font);
    font-size: var(--w-body-size);
    line-height: var(--w-body-lh);
    color: var(--w-body);
}

h1, .w-h1 { font-size: var(--w-h1-size); line-height: var(--w-h1-lh); }
h2, .w-h2 { font-size: var(--w-h2-size); line-height: var(--w-h2-lh); }
h3, .w-h3 { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); }
.w-small, small { font-size: var(--w-small-size); }

h1, h2, h3, h4, h5, h6 {
    color: var(--w-navy);
    text-transform: none;       /* sentence case, never ALL CAPS */
}

a { color: var(--w-aqua-dark); }
a:hover { color: var(--w-navy); }

/* ============================================================
   4.4 — BUTTONS: 44px min height, radius 8,
   one primary CTA per card/section
   ============================================================ */
.w-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--w-space-2);
    min-height: 44px;
    padding: 0 var(--w-space-5);
    border-radius: var(--w-radius);
    font-family: var(--w-font);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--w-transition);
    border: 2px solid transparent;
}

/* Every variant is duplicated with an `a.` prefix on purpose. The Elementor
   kit ships `.elementor-kit-6 a { color: #0E7490 }` — specificity (0,1,1),
   which outranks a bare `.w-btn--primary` (0,1,0). Without the anchor form,
   every button rendered as a LINK came out aqua: #0E7490 text on the #EB3D0A
   CTA, which is both wrong and far below AA. `a.w-btn--primary` ties the kit
   at (0,1,1) and design-system.css is enqueued after post-6.css, so the tie
   resolves here. Buttons rendered as <button> never had the problem, which is
   why it only showed up once the product card started emitting <a> CTAs. */
.w-btn--primary,
a.w-btn--primary {
    background: var(--w-cta);
    color: var(--w-white);
}
.w-btn--primary:hover,
.w-btn--primary:focus,
a.w-btn--primary:hover,
a.w-btn--primary:focus {
    background: var(--w-cta-hover);
    color: var(--w-white);
}

.w-btn--secondary,
a.w-btn--secondary {
    background: transparent;
    border-color: var(--w-navy);
    color: var(--w-navy);
}
.w-btn--secondary:hover,
.w-btn--secondary:focus,
a.w-btn--secondary:hover,
a.w-btn--secondary:focus {
    background: var(--w-navy);
    color: var(--w-white);
}

.w-btn--tertiary,
a.w-btn--tertiary {
    background: transparent;
    color: var(--w-aqua-dark);
    padding-inline: var(--w-space-2);
}
.w-btn--tertiary:hover,
.w-btn--tertiary:focus,
a.w-btn--tertiary:hover,
a.w-btn--tertiary:focus {
    color: var(--w-navy);
    text-decoration: underline;
}

/* ============================================================
   4.5 — CARDS: radius 12, 1px border, hover shadow,
   equal height, 1:1 media, object-fit contain
   ============================================================ */
.w-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--w-white);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius-card);
    box-shadow: var(--w-shadow-sm);
    overflow: hidden;
    transition: var(--w-transition);
}
.w-card:hover {
    box-shadow: var(--w-shadow-lg);
}
.w-card__media {
    aspect-ratio: 1 / 1;
    background: var(--w-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--w-space-4);
}
.w-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.w-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--w-space-2);
    padding: var(--w-space-4);
}
.w-card__footer {
    margin-top: auto;           /* equal-height cards align CTAs */
    padding-top: var(--w-space-3);
}

/* Block 5.2: the !important arms race here is over. frontend.css no longer
   declares the card (that block moved to watec-b2b-commerce/assets/
   product-card.css, without !important), and loop items now carry .w-card
   directly via ProductCard::card_class(), so the radius comes from the
   .w-card rule above. Nothing to override. */

/* ============================================================
   4.6 — SPACING SCALE utilities (4/8/12/16/24/32/48/64/96)
   ============================================================ */
.w-mt-1 { margin-top: var(--w-space-1); } .w-mb-1 { margin-bottom: var(--w-space-1); }
.w-mt-2 { margin-top: var(--w-space-2); } .w-mb-2 { margin-bottom: var(--w-space-2); }
.w-mt-3 { margin-top: var(--w-space-3); } .w-mb-3 { margin-bottom: var(--w-space-3); }
.w-mt-4 { margin-top: var(--w-space-4); } .w-mb-4 { margin-bottom: var(--w-space-4); }
.w-mt-5 { margin-top: var(--w-space-5); } .w-mb-5 { margin-bottom: var(--w-space-5); }
.w-mt-6 { margin-top: var(--w-space-6); } .w-mb-6 { margin-bottom: var(--w-space-6); }
.w-mt-7 { margin-top: var(--w-space-7); } .w-mb-7 { margin-bottom: var(--w-space-7); }
.w-mt-8 { margin-top: var(--w-space-8); } .w-mb-8 { margin-bottom: var(--w-space-8); }
.w-mt-9 { margin-top: var(--w-space-9); } .w-mb-9 { margin-bottom: var(--w-space-9); }
.w-stack    > * + * { margin-top: var(--w-space-4); }
.w-stack-sm > * + * { margin-top: var(--w-space-2); }
.w-stack-lg > * + * { margin-top: var(--w-space-6); }

/* ============================================================
   4.7 — REUSABLE STATES
   ============================================================ */

/* Loading skeleton */
.w-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--w-line-light);
    border-radius: var(--w-radius-sm);
    min-height: 1em;
}
.w-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: w-skeleton-shimmer 1.4s infinite;
}
@keyframes w-skeleton-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .w-skeleton::after { animation: none; }
}

/* Generic state panel (empty result / error base) */
.w-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-7) var(--w-space-5);
    background: var(--w-bg-soft);
    border: 1px solid var(--w-line);   /* solid — dashed reads as a form error */
    border-radius: var(--w-radius-card);
    text-align: center;
}
.w-state__icon { font-size: 32px; line-height: 1; }
.w-state__title { font-size: var(--w-h3-size); line-height: var(--w-h3-lh); color: var(--w-ink); font-weight: 600; }
.w-state__text { font-size: var(--w-small-size); color: var(--w-slate); max-width: 46ch; }

.w-state--error {
    background: #FEF2F2;
    border-color: var(--w-error);
}
.w-state--error .w-state__title { color: var(--w-error); }

/* Pending approval */
.w-pending {
    display: flex;
    align-items: flex-start;
    gap: var(--w-space-3);
    padding: var(--w-space-4) var(--w-space-5);
    background: #FFFBEB;
    border: 1px solid var(--w-warning);
    border-left-width: 4px;
    border-radius: var(--w-radius);
}
.w-pending__title { color: var(--w-warning); font-weight: 600; }
.w-pending__text { font-size: var(--w-small-size); color: var(--w-body); }

/* Price hidden (guest) — canonical class; .pohoda-price-hidden
   in frontend.css is patched to the same solid-border treatment. */
.w-price-hidden {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--w-space-3);
    padding: var(--w-space-5);
    background: var(--w-bg-soft);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius-card);
    text-align: center;
}
.w-price-hidden__message {
    font-size: var(--w-small-size);
    color: var(--w-slate);
    line-height: 1.5;
}

/* ============================================================
   STYLE GUIDE PAGE scaffolding (page-style-guide.php)
   ============================================================ */
.w-sg-section { padding-block: var(--w-space-7); border-bottom: 1px solid var(--w-line); }
.w-sg-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-slate); margin-bottom: var(--w-space-4); }
.w-sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--w-space-3); }
.w-sg-swatch { border: 1px solid var(--w-line); border-radius: var(--w-radius); overflow: hidden; }
.w-sg-chip { height: 64px; }
.w-sg-meta { padding: var(--w-space-2) var(--w-space-3); font-size: 12px; color: var(--w-slate); }
.w-sg-meta b { display: block; color: var(--w-ink); font-size: 13px; }
.w-sg-spacebar { background: var(--w-aqua-pale); border-radius: var(--w-radius-sm); height: 16px; }
.w-sg-row { display: flex; flex-wrap: wrap; gap: var(--w-space-3); align-items: center; }