/*
Theme Name: Sticktastic
Theme URI: https://sticktastic.nl
Description: Custom WooCommerce theme voor Sticktastic.nl - fleurige, speelse sticker-maker. Design-tokens volgen strikt de Sticktastic Design Brief v1.0 (Fredoka/Inter, coral/geel/mint/violet op warm gebroken wit). Speels maar professioneel.
Author: Sticktastic / Axians
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sticktastic
Tags: woocommerce, custom-colors, block-styles
*/

/* ==========================================================================
   Sticktastic - design tokens (bron: Sticktastic Design Brief §2.2-2.5)
   De meeste tokens komen uit theme.json; deze :root spiegelt ze voor
   classic templates en losse componenten.
   ========================================================================== */
:root {
  /* Basis */
  --stk-cream:  #FBF8F3;  /* achtergrond, geen steriel wit */
  --stk-ink:    #1E272A;  /* bodytekst + koppen (logo-charcoal) */
  --stk-mist:   #E8E4DD;  /* randen, kaarten, scheidingen */
  /* Confetti-accenten (max 2 per sectie) */
  --stk-coral:  #FF5E5B;  /* ENIGE primaire actie-kleur */
  --stk-yellow: #FFC847;  /* highlights, badges */
  --stk-mint:   #4ECDC4;  /* secundair, 'binnen/eco' */
  --stk-violet: #6C5CE7;  /* premium, holo-knipoog */
  /* Signatuur */
  --stk-holo: linear-gradient(115deg, #FF5E5B 0%, #6C5CE7 35%, #4ECDC4 68%, #FFC847 100%);
  /* Vorm-taal: afgeronde hoeken overal (8-16px) */
  --stk-radius-sm: 8px;
  --stk-radius:    12px;
  --stk-radius-lg: 16px;
  --stk-shadow: 0 24px 60px rgba(26,26,46,.10);
  /* Typografie */
  --stk-font-head: 'Fredoka', system-ui, sans-serif;
  --stk-font-body: 'Inter', system-ui, sans-serif;
}

body {
  background: var(--stk-cream);
  color: var(--stk-ink);
  font-family: var(--stk-font-body);
  line-height: 1.6;                 /* brief §2.4: 1.5-1.6 */
  margin: 0;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--stk-font-head); font-weight: 600; line-height: 1.15; }

/* Primaire CTA - coral, consistent (brief §2.2 regel) */
.stk-btn {
  display: inline-block;
  font-family: var(--stk-font-head);
  font-weight: 600;
  background: var(--stk-coral);
  color: #fff;
  border: 0;
  border-radius: var(--stk-radius);
  padding: 14px 26px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stk-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,94,91,.30); }

/* Holo-signatuur - uitsluitend voor de holo-lijn (brief §2.3) */
.stk-holo { background: var(--stk-holo); background-size: 200% 200%; }
@media (prefers-reduced-motion: no-preference) {
  .stk-holo:hover { animation: stk-holo-shift 6s ease infinite; }
  @keyframes stk-holo-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
}

/* Kaart met peel-corner motief (brief §2.5) */
.stk-card {
  background:#fff; border:1px solid var(--stk-mist);
  border-radius: var(--stk-radius-lg); padding:24px;
  box-shadow: var(--stk-shadow);
}