/*
Theme Name: Kadence Wulkdrive
Theme URI: https://serwis.wulkdrive.pl
Description: Child theme Kadence dla Wulkdrive — warsztat samochodowy Tychy. Design tokens, placeholdery SVG, schema-ready.
Author: Wulkdrive
Template: kadence
Version: 0.1.0
Text Domain: kadence-wulkdrive
*/

/* === Design tokens (semantic) === */
:root {
    /* Navy */
    --color-navy-50:  #F1F4FA;
    --color-navy-100: #DCE3F0;
    --color-navy-500: #3D5A95;
    --color-navy-600: #2D4476;
    --color-navy-700: #1F3258;
    --color-navy-800: #15244A;
    --color-navy-900: #0F1E3D;
    --color-navy-950: #0A1428;

    /* Red — CTA */
    --color-red-50:  #FEF2F2;
    --color-red-600: #DC2626;
    --color-red-700: #B91C1C;

    /* Amber — promo */
    --color-amber-50:  #FFFBEB;
    --color-amber-500: #F59E0B;
    --color-amber-600: #D97706;

    /* Gray scale */
    --color-gray-50:  #F9FAFB;
    --color-gray-200: #E5E7EB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-700: #374151;
    --color-gray-900: #111827;

    /* Semantic */
    --bg-base: #FFFFFF;
    --bg-subtle: var(--color-gray-50);
    --bg-inverted: var(--color-navy-900);
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-500);
    --text-inverted: #FFFFFF;
    --text-link: var(--color-navy-700);
    --text-link-hover: var(--color-red-600);
    --accent-action: var(--color-red-600);
    --accent-action-hover: var(--color-red-700);
    --accent-trust: var(--color-navy-700);
    --accent-promo: var(--color-amber-500);
    --border-default: var(--color-gray-200);
    --border-focus: var(--color-navy-700);

    /* Spacing — 8pt grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
}

/* === Base typography (Inter — załadowane przez Kadence customizer) === */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    background: var(--bg-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
    color: var(--color-navy-900);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* === CTA buttons (red) === */
.wp-block-button.cta-primary .wp-block-button__link,
.wd-cta {
    background: var(--accent-action);
    color: #FFFFFF !important;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    display: inline-block;
    transition: background 0.15s ease;
    min-height: 44px;
}
.wp-block-button.cta-primary .wp-block-button__link:hover,
.wd-cta:hover {
    background: var(--accent-action-hover);
}

/* === Trust badges (e.g. "od 1989", "gwarancja 2 lata") === */
.wd-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-navy-50);
    color: var(--color-navy-800);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

/* === Promo badge (amber) === */
.wd-promo-badge {
    display: inline-block;
    background: var(--color-amber-50);
    color: var(--color-amber-600);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* === Price card === */
.wd-price-card {
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: var(--space-5);
    background: var(--bg-base);
}
.wd-price-card__price {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-navy-900);
}
.wd-price-card__price small { font-size: 16px; color: var(--text-secondary); font-weight: 500; }

/* === SVG placeholder wrapper === */
.wd-placeholder {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-navy-50);
    border-radius: 8px;
    overflow: hidden;
}

/* === Inverted (dark) section === */
.wd-section-dark {
    background: var(--bg-inverted);
    color: var(--text-inverted);
    padding: var(--space-7) 0;
}
.wd-section-dark h2, .wd-section-dark h3 { color: #FFFFFF; }

/* === Pre-launch banner === */
.wd-prelaunch-banner {
    background: var(--color-amber-500);
    color: var(--color-navy-900);
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* === A11y: visible focus === */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--border-focus);
    outline-offset: 2px;
}