/*
Theme Name: Skwirrel Base
Theme URI: https://skwirrel.eu/
Author: Skwirrel
Author URI: https://skwirrel.eu/
Description: Een schoon, modulair WooCommerce-basisthema in Skwirrel-huisstijl. Ondersteunt alle standaard WooCommerce-functionaliteit: variabele producten, AJAX-productfiltering, winkelwagen, checkout, account, reviews en gerelateerde producten. Gebouwd met CSS custom properties zodat de huisstijl eenvoudig aanpasbaar is.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
WC requires at least: 7.0
WC tested up to: 8.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skwirrel-base
Tags: woocommerce, e-commerce, two-columns, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =====================================================================
   Skwirrel Base — Design Tokens & Base styles
   De volledige component-styling staat in assets/css/skwirrel.css
   ===================================================================== */

:root {
    /* Brand */
    --sk-lime:          #C8E84A;
    --sk-lime-600:      #B4D636;
    --sk-lime-700:      #9CBE22;
    --sk-lavender:      #E8ECFA;
    --sk-lavender-200:  #DCE2F6;
    --sk-ink:           #1A1B2E;
    --sk-ink-soft:      #2A2C45;
    --sk-white:         #FFFFFF;
    --sk-grey-50:       #F7F8FC;
    --sk-grey-100:      #EEF0F7;
    --sk-grey-200:      #E0E3EF;
    --sk-grey-400:      #9DA3BD;
    --sk-grey-600:      #5B6079;
    --sk-text:          #2A2C45;
    --sk-muted:         #6A6F8A;
    --sk-danger:        #E2483B;
    --sk-success:       #2E9E5B;

    /* Typography */
    --sk-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sk-fs-base: 15px;
    --sk-lh-base: 1.55;

    /* Layout */
    --sk-container: 1400px;
    --sk-radius:    12px;
    --sk-radius-sm: 7px;
    --sk-radius-pill: 999px;
    --sk-gap:       18px;

    /* Elevation */
    --sk-shadow-sm: 0 1px 2px rgba(26, 27, 46, .06), 0 1px 3px rgba(26, 27, 46, .08);
    --sk-shadow:    0 4px 16px rgba(26, 27, 46, .08);
    --sk-shadow-lg: 0 12px 40px rgba(26, 27, 46, .14);

    /* Transitions */
    --sk-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Base reset-ish */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.skwirrel-base {
    margin: 0;
    font-family: var(--sk-font-sans);
    font-size: var(--sk-fs-base);
    line-height: var(--sk-lh-base);
    color: var(--sk-text);
    background: var(--sk-lavender);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sk-ink); text-decoration: none; transition: color .15s var(--sk-ease); }
a:hover { color: var(--sk-lime-700); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--sk-ink);
    margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

.skwirrel-container {
    width: 100%;
    max-width: var(--sk-container);
    margin-inline: auto;
    padding-inline: 20px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--sk-ink);
    color: #fff;
    padding: 12px 18px;
    border-radius: 0 0 var(--sk-radius-sm) 0;
    z-index: 1000;
}
.skip-link:focus { left: 0; color: #fff; }

/* Screen-reader text (matches WP core) */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%); height: 1px; width: 1px;
    margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}