/*
Theme Name: WATJE
Theme URI: https://geenwatje.nl
Author: Saorsa
Author URI: https://saorsa.nl
Description: WATJE — Bold one-page WooCommerce theme for the WATJE drink brand.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: watje
Tags: one-page, woocommerce, custom-theme
*/

/* ==========================================================================
   Design Tokens (from Stitch Design System)
   ========================================================================== */
:root {
  /* Primary */
  --w-yellow: #F6E51A;
  --w-yellow-dim: #D9C900;
  --w-yellow-dark: #686000;
  --w-black: #1F1C00;
  --w-on-surface: #1C1B1B;

  /* Surfaces */
  --w-surface: #FCF9F8;
  --w-surface-low: #F6F3F2;
  --w-surface-container: #F0EDED;
  --w-surface-high: #EAE7E7;
  --w-surface-highest: #E5E2E1;
  --w-surface-dim: #DCD9D9;

  /* Neutral */
  --w-outline: #7B7860;
  --w-outline-variant: #CCC7AB;
  --w-secondary: #5E5E5E;
  --w-secondary-container: #E2E2E2;

  /* Error */
  --w-error: #BA1A1A;

  /* Typography */
  --w-font-display: 'Luckiest Guy', cursive;
  --w-font-headline: 'Plus Jakarta Sans', sans-serif;
  --w-font-body: 'Be Vietnam Pro', sans-serif;

  /* Spacing (2x scale) */
  --w-space-xs: 4px;
  --w-space-sm: 8px;
  --w-space-md: 16px;
  --w-space-lg: 24px;
  --w-space-xl: 32px;
  --w-space-2xl: 48px;
  --w-space-3xl: 64px;
  --w-space-4xl: 96px;

  /* Radius */
  --w-radius-sm: 8px;
  --w-radius-md: 12px;
  --w-radius-lg: 16px;
  --w-radius-full: 9999px;

  /* Shadows */
  --w-shadow-ambient: 0 20px 40px rgba(26, 28, 28, 0.06);
  --w-shadow-press: 0 2px 0 rgba(31, 28, 0, 0.3);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--w-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--w-on-surface);
  background-color: var(--w-surface);
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--w-font-headline);
  font-weight: 800;
  line-height: 1.1;
  color: var(--w-black);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

/* ==========================================================================
   Layout
   ========================================================================== */
.watje-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--w-space-lg);
}

.watje-section {
  padding: var(--w-space-4xl) 0;
}

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
.watje-display {
  font-family: var(--w-font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.watje-heading-lg {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  text-transform: uppercase;
}

.watje-heading-md {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
}

.watje-label {
  font-family: var(--w-font-headline);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.watje-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w-space-sm);
  padding: 14px 32px;
  font-family: var(--w-font-headline);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--w-radius-full);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.watje-btn--primary {
  background: var(--w-black);
  color: var(--w-surface);
}

.watje-btn--primary:hover {
  background: #333;
  box-shadow: var(--w-shadow-press);
  transform: translateY(-1px);
}

.watje-btn--secondary {
  background: var(--w-yellow);
  color: var(--w-black);
}

.watje-btn--secondary:hover {
  background: var(--w-yellow-dim);
  box-shadow: var(--w-shadow-press);
  transform: translateY(-1px);
}

.watje-btn--outline {
  background: transparent;
  color: var(--w-black);
  box-shadow: inset 0 0 0 2px var(--w-black);
}

.watje-btn--outline:hover {
  background: var(--w-black);
  color: var(--w-surface);
}

.watje-btn--white {
  background: white;
  color: var(--w-black);
}

.watje-btn--white:hover {
  background: var(--w-surface-high);
}

/* Mobile container padding */
@media (max-width: 480px) {
    .watje-container {
        padding: 0 16px;
    }
}