/*
 * global.css – Thema Starter
 *
 * Inhoud:
 *  1. CSS Custom Properties (design tokens)
 *  2. Modern CSS Reset
 *  3. Typografie basis
 *  4. Layout helpers (.container)
 *  5. Accessibility helpers
 *
 * Wordt op ELKE pagina geladen.
 * Houd dit bestand zo licht mogelijk – paginaspecifieke stijlen
 * staan in /assets/css/templates/*.css
 */

/* =============================================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================================= */

:root {
	/* Kleurenpalet – pas aan naar jouw merk */
	--color-primary:        #00C1D5;
	--color-primary-light:  #118d99;
	--color-secondary:      #ffffff;
	--color-accent:         #e63946;
	--color-neutral-100:    #f8f8f8;
	--color-neutral-200:    #e8e8e8;
	--color-neutral-400:    #9a9a9a;
	--color-neutral-700:    #3a3a3a;
	--color-text:           #1a1a1a;
	--color-text-muted:     #666666;
	--color-border:         #e0e0e0;
	--color-error:          #d32f2f;
	--color-success:        #2e7d32;

	/* Typografie */
	--font-sans:    system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:    'Courier New', Courier, monospace;
	--font-size-xs: 0.75rem;   /* 12px */
	--font-size-sm: 0.875rem;  /* 14px */
	--font-size-md: 1rem;      /* 16px */
	--font-size-lg: 1.125rem;  /* 18px */
	--font-size-xl: 1.25rem;   /* 20px */
	--font-size-2xl: 1.5rem;   /* 24px */
	--font-size-3xl: 2rem;     /* 32px */
	--font-size-4xl: 2.5rem;   /* 40px */
	--line-height-tight:  1.2;
	--line-height-normal: 1.6;
	--line-height-loose:  1.8;

	/* Spacing schaal */
	--space-1:  0.25rem;  /* 4px */
	--space-2:  0.5rem;   /* 8px */
	--space-3:  0.75rem;  /* 12px */
	--space-4:  1rem;     /* 16px */
	--space-5:  1.25rem;  /* 20px */
	--space-6:  1.5rem;   /* 24px */
	--space-8:  2rem;     /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */

	/* Layout */
	--container-max:   1200px;
	--container-pad:   var(--space-6);

	/* Borders & radius */
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 16px;
	--border-radius-full: 9999px;

	/* Schaduwen */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);

	/* Animaties */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow:   400ms ease;

	/* Z-index schaal */
	--z-dropdown:  100;
	--z-sticky:    200;
	--z-overlay:   300;
	--z-modal:     400;
	--z-toast:     500;
}

/* modern css reset */
*, *::before, *::after {box-sizing:border-box;margin:0;padding:0;}
html {scroll-behavior:smooth;-webkit-text-size-adjust:100%;tab-size:4;}
body {font-family:var(--font-sans);font-size:var(--font-size-md);line-height:var(--line-height-normal);color:var(--color-text);background-color:var(--color-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
img, picture, video, canvas, svg {display:block;max-width:100%;}
input, button, textarea, select {font:inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap:break-word;}
ul, ol {list-style:none;}
a {color:inherit;text-decoration:none;}

/* typografie basis */
h1, h2, h3, h4, h5, h6 {font-weight:700;line-height:var(--line-height-tight);}
h1 {font-size:var(--font-size-4xl);}
h2 {font-size:var(--font-size-3xl);}
h3 {font-size:var(--font-size-2xl);}
h4 {font-size:var(--font-size-xl);}
h5 {font-size:var(--font-size-lg);}
h6 {font-size:var(--font-size-md);}

/* layout helpers */
.container {width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-pad);}
.site {display:flex;flex-direction:column;min-height:100vh;}
.site .site-main {flex:1;}

/* accessibility */
.screen-reader-text {border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important;}
.screen-reader-text:focus {background-color:var(--color-secondary);clip:auto !important;clip-path:none;color:var(--color-primary);display:block;font-size:var(--font-size-sm);font-weight:700;height:auto;left:var(--space-4);line-height:normal;padding:var(--space-4) var(--space-5);text-decoration:none;top:var(--space-4);width:auto;z-index:var(--z-toast);}
:focus-visible {outline:2px solid var(--color-accent);outline-offset:3px;}

/* buttons */
.btn {display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;font-size:var(--font-size-md);font-weight:700;border-radius:6px;border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);}
.btn:hover {transform:translateY(-1px);}
.btn:active {transform:translateY(0);}
.btn--primary {background-color:var(--color-primary);color:var(--color-secondary);border-color:var(--color-primary);}
.btn--primary:hover {background-color:var(--color-primary-light);border-color:var(--color-primary-light);}
.btn--outline {background-color:transparent;color:var(--color-primary);border-color:var(--color-primary);}
.btn--outline:hover {background-color:var(--color-primary);color:var(--color-secondary);}

/* woo *//* stock */
.stock-badge-wrapper {order:4;}
p.stock {border-radius:6px;color:white;padding:0px 8px;border:1px solid white;width:fit-content;font-size:13px;}
p.stock.out-of-stock {border-color:#C0392B;color:#C0392B !important;}
p.stock.low-in-stock {border-color:#FBB03B;color:#FBB03B !important;}
p.stock.in-stock {border-color:#008000;color:#008000 !important;}