/* ============================================================
   SINTERKLAASDECORATIE.NL — Design Tokens
   Bron van waarheid voor alle visuele waarden.
   Wijzig hier → verandert overal.

   Fonts: Montserrat (display/UI), Playfair Display (body/serif), Great Vibes (script)
   Kleuren: monochroom + goud (paper, cream, ink, gold)
   Spacing: D-scale fluid responsive
   ============================================================ */


/* ==========================================================================
   1. COLOR PALETTE
   ========================================================================== */

:root {
  /* --- Basis kleuren (monochroom + goud) --- */
  --px-color-custom:        #C9A24B;  /* Goud (primair accent) */
  --px-color-secondary:     #1A1A1A;  /* Ink (zwart) */
  --px-color-conversion:    #1A1A1A;  /* CTA kleur */
  --px-color-font:          #3A3A3A;  /* Body tekst */
  --px-color-white:         #FFFFFF;
  --px-color-link:          #1A1A1A;
  --px-color-border:        rgba(26, 26, 26, 0.12);
  --px-color-border-subtle: rgba(26, 26, 26, 0.06);
  --px-color-star:          #E8B547;
  --px-color-danger:        #C4564A;

  /* --- Naamkleuren (voor directe referentie) --- */
  --paper:          #FDFCF7;
  --cream:          #F9F4E8;
  --ink:            #1A1A1A;
  --charcoal:       #2B2B2B;
  --text:           #3A3A3A;
  --text-muted:     #7A7570;
  --gold:           #C9A24B;
  --gold-light:     #E6C876;
  --gold-soft:      #F3E5B8;
  --white:          #FFFFFF;
  --line:           rgba(26, 26, 26, 0.12);
  --line-soft:      rgba(26, 26, 26, 0.06);
  --success:        #4A7C5C;
  --error:          #C4564A;

  /* --- Oppervlakken --- */
  --px-surface-light:       #FDFCF7;  /* Paper (hoofd achtergrond) */
  --px-surface-dark:        #1A1A1A;
  --px-surface-card:        #FFFFFF;
  --px-gray-highlight:      #F9F4E8;  /* Cream */

  /* --- Schalen (voor webshop-core compatibiliteit) --- */
  --px-color-custom-50:     #FBF6EB;
  --px-color-custom-100:    #F3E5B8;
  --px-color-custom-200:    #E6C876;
  --px-color-custom-300:    #D4AD55;
  --px-color-custom-400:    #C9A24B;
  --px-color-custom-500:    #B8923F;
  --px-color-custom-600:    #A07D33;
  --px-color-custom-700:    #876828;
  --px-color-custom-800:    #6E531D;
  --px-color-custom-900:    #553F13;

  --px-color-secondary-50:  #F5F5F5;
  --px-color-secondary-100: #E0E0E0;
  --px-color-secondary-200: #B8B8B8;
  --px-color-secondary-300: #8A8A8A;
  --px-color-secondary-400: #5C5C5C;
  --px-color-secondary-500: #3A3A3A;
  --px-color-secondary-600: #2B2B2B;
  --px-color-secondary-700: #1A1A1A;
  --px-color-secondary-800: #111111;
  --px-color-secondary-900: #080808;

  /* RGB voor opacity mixen */
  --px-color-custom-rgb:    201, 162, 75;
  --px-color-secondary-rgb: 26, 26, 26;
}


/* ==========================================================================
   2. FONT FAMILIES
   ========================================================================== */

:root {
  --font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body:    'Playfair Display', Georgia, serif;
  --font-script:  'Great Vibes', 'Brush Script MT', cursive;

  /* webshop-core px-* aliassen */
  --px-font-display: var(--font-display);
  --px-font-heading: var(--font-display);
  --px-font-body:    var(--font-body);
}


/* ==========================================================================
   3. FONT WEIGHTS
   ========================================================================== */

:root {
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}


/* ==========================================================================
   4. LINE HEIGHTS
   ========================================================================== */

:root {
  --lh-tight:   1.2;
  --lh-snug:    1.3;
  --lh-normal:  1.4;
  --lh-relaxed: 1.75;
}


/* ==========================================================================
   5. LETTER SPACINGS
   ========================================================================== */

:root {
  --ls-tight:   -0.01em;
  --ls-none:    0em;
  --ls-wide:    0.08em;
  --ls-wider:   0.12em;
  --ls-widest:  0.2em;
}


/* ==========================================================================
   6. TYPOGRAPHY SCALE (fluid responsive)
   Min screen: 390px (24.38rem) / Max screen: 2200px (137.5rem)
   ========================================================================== */

:root {
  --text-d001: clamp(0.16rem, calc(0 * (100vw - 24.38rem) + 0.16rem), 0.16rem);
  --text-d025: clamp(0.25rem, calc(0.001149 * (100vw - 24.38rem) + 0.25rem), 0.38rem);
  --text-d05:  clamp(0.53rem, calc(0.001945 * (100vw - 24.38rem) + 0.53rem), 0.75rem);
  --text-d075: clamp(0.79rem, calc(0.003005 * (100vw - 24.38rem) + 0.79rem), 1.13rem);
  --text-d1:   clamp(1.06rem, calc(0.003889 * (100vw - 24.38rem) + 1.06rem), 1.5rem);
  --text-d125: clamp(1.31rem, calc(0.005039 * (100vw - 24.38rem) + 1.31rem), 1.88rem);
  --text-d15:  clamp(1.56rem, calc(0.006100 * (100vw - 24.38rem) + 1.56rem), 2.25rem);
  --text-d2:   clamp(2.1rem,  calc(0.007956 * (100vw - 24.38rem) + 2.1rem),  3.0rem);
  --text-d3:   clamp(3.13rem, calc(0.012111 * (100vw - 24.38rem) + 3.13rem), 4.5rem);
  --text-d5:   clamp(5.25rem, calc(0.019889 * (100vw - 24.38rem) + 5.25rem), 7.5rem);
  --text-d10:  clamp(10.5rem, calc(0.039778 * (100vw - 24.38rem) + 10.5rem), 15.0rem);

  /* webshop-core aliassen */
  --px-fz-small:    var(--text-d05);
  --px-fz-text:     var(--text-d075);
  --px-fz-subtitle: var(--text-d1);
  --px-fz-title:    var(--text-d125);
  --px-fz-big:      var(--text-d15);
  --px-fz-extrabig: var(--text-d2);
  --px-fz-display:  var(--text-d3);
}


/* ==========================================================================
   7. SPACING SCALE (fluid responsive)
   ========================================================================== */

:root {
  --space-d001: clamp(0.13rem, calc(0 * (100vw - 24.38rem) + 0.13rem), 0.13rem);
  --space-d025: clamp(0.22rem, calc(0.0007956152758132955 * (100vw - 24.38rem) + 0.22rem), 0.31rem);
  --space-d05:  clamp(0.44rem, calc(0.0016796322489391795 * (100vw - 24.38rem) + 0.44rem), 0.63rem);
  --space-d075: clamp(0.66rem, calc(0.0024752475247524744 * (100vw - 24.38rem) + 0.66rem), 0.94rem);
  --space-d1:   clamp(0.88rem, calc(0.0032708628005657706 * (100vw - 24.38rem) + 0.88rem), 1.25rem);
  --space-d125: clamp(1.09rem, calc(0.004154879773691654 * (100vw - 24.38rem) + 1.09rem), 1.56rem);
  --space-d15:  clamp(1.31rem, calc(0.005038896746817538 * (100vw - 24.38rem) + 1.31rem), 1.88rem);
  --space-d2:   clamp(1.75rem, calc(0.00663012729844413 * (100vw - 24.38rem) + 1.75rem), 2.5rem);
  --space-d3:   clamp(2.63rem, calc(0.009900990099009901 * (100vw - 24.38rem) + 2.63rem), 3.75rem);
  --space-d5:   clamp(4.38rem, calc(0.016531117397454033 * (100vw - 24.38rem) + 4.38rem), 6.25rem);
  --space-d10:  clamp(8.75rem, calc(0.03315063649222065 * (100vw - 24.38rem) + 8.75rem), 12.5rem);

  /* webshop-core aliassen */
  --px-space-xs:   var(--space-d025);
  --px-space-sm:   var(--space-d05);
  --px-space-md:   var(--space-d075);
  --px-space-base: var(--space-d1);
  --px-space-lg:   var(--space-d15);
  --px-space-xl:   var(--space-d2);
  --px-space-2xl:  var(--space-d3);
  --px-space-3xl:  var(--space-d5);
}


/* ==========================================================================
   8. BORDER RADIUS
   ========================================================================== */

:root {
  --radius-xs:   var(--space-d05);
  --radius-s:    var(--space-d075);
  --radius-m:    var(--space-d1);
  --radius-full: 50%;
  --radius-pill: 999rem;

  /* webshop-core alias */
  --px-radius:      0;
  --px-radius-full:  999rem;
}


/* ==========================================================================
   9. LAYOUT
   ========================================================================== */

:root {
  --row-width:        1180px;
  --row-width-narrow: 1040px;

  --px-container-max:     1250px;
  --px-container-padding: var(--space-d1);
  --px-gutter:            var(--space-d1);
}


/* ==========================================================================
   10. BOX SHADOWS
   ========================================================================== */

:root {
  --shadow-subtle:        1px 1px 2px 0px #00000059;
  --shadow-hover:         1px 3px 4px 0px #33333333;
  --shadow-pressed:       1px 2px 3px 0px #33333333;
  --shadow-elevated:      2px 4px 10px 0px #33333326;
  --shadow-elevated-fluid: var(--space-d05) var(--space-d075) var(--space-d2) 0px #00000040;
  --shadow-text:          1px 1px 2px rgba(0, 0, 0, 0.45);

  --px-shadow-sm: var(--shadow-subtle);
  --px-shadow-md: var(--shadow-hover);
  --px-shadow-lg: var(--shadow-elevated);
}


/* ==========================================================================
   11. TRANSITIONS & ANIMATIONS
   ========================================================================== */

:root {
  --duration-fast:   0.15s;
  --duration-normal: 0.3s;
  --duration-slow:   0.5s;

  --ease-in:      ease-in;
  --ease-out:     ease-out;
  --ease-in-out:  ease-in-out;
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);

  --transition-btn: background-color var(--duration-normal) var(--ease-smooth),
                    border-color var(--duration-normal) var(--ease-smooth),
                    box-shadow var(--duration-normal) var(--ease-smooth),
                    color var(--duration-normal) var(--ease-smooth);

  --px-duration-default: var(--duration-normal);
  --px-ease:             var(--ease-smooth);
  --px-transition:       all var(--duration-normal) var(--ease-smooth);
}


/* ==========================================================================
   12. GRADIENTS
   ========================================================================== */

:root {
  --gradient-img-overlay-right: linear-gradient(to right, color-mix(in srgb, var(--ink) 45%, transparent) 30%, transparent 71.5%);
  --gradient-img-overlay-left:  linear-gradient(to left,  color-mix(in srgb, var(--ink) 45%, transparent) 30%, transparent 71.5%);
  --gradient-card-overlay:      linear-gradient(205deg, transparent 27.81%, color-mix(in srgb, var(--ink) 45%, transparent) 68.72%);
}


/* ==========================================================================
   13. BASELINE BODY
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--px-color-font);
  background: var(--px-surface-light);
}

.px-container {
  max-width: var(--px-container-max);
  margin: 0 auto;
  padding: 0 var(--px-container-padding);
}