/**
 * GlassGrasie® — Design Token System
 * v1.0 — mei 2026
 *
 * Gebruik: <link rel="stylesheet" href="/design-tokens.css">
 * Dan in je CSS: color: var(--text-1); background: var(--bg); etc.
 *
 * Structuur:
 *   1. Kleur — primitives
 *   2. Kleur — semantisch
 *   3. Typografie
 *   4. Spacing
 *   5. Layout
 *   6. Motion
 *   7. Component tokens
 *   8. Glasmorfisme
 */

:root {

  /* ─── 1. KLEUR — PRIMITIVES ─────────────────────────────────────────────── */

  /* Zwart spectrum (achtergronden) */
  --color-black-950: #0A0908;   /* diepste achtergrond — bg3 */
  --color-black-900: #0D0C0B;   /* hoofd achtergrond — bg */
  --color-black-850: #100F0D;   /* kaart achtergrond — bg2 */
  --color-black-800: #141210;   /* verhoogde oppervlakken */
  --color-black-700: #1C1810;   /* subtiele randen — rule */

  /* Goud spectrum (brand accent) */
  --color-gold-900: #2A2018;    /* diepste goud — bijna zwart */
  --color-gold-800: #3A2E20;    /* donker goud */
  --color-gold-700: #4A3F30;    /* laag goud — gold-lo */
  --color-gold-600: #6B5840;    /* middel goud */
  --color-gold-500: #8B7355;    /* basis goud — gold */
  --color-gold-400: #A89060;    /* licht goud */
  --color-gold-300: #C9A87C;    /* helder goud — gold-hi */
  --color-gold-200: #DFC49A;    /* zacht goud */
  --color-gold-100: #F0E0C0;    /* bleek goud */

  /* Crème spectrum (tekst) */
  --color-cream-900: #3A3020;   /* diepste tekst — text-5 */
  --color-cream-800: #5A5044;   /* donkere tekst — text-4 */
  --color-cream-700: #8A8070;   /* secundaire tekst — text-3 */
  --color-cream-600: #B0A090;   /* tertiaire tekst */
  --color-cream-500: #D4C9B8;   /* body tekst — text-2 */
  --color-cream-400: #E8E2D8;   /* primaire tekst — text-1 */
  --color-cream-300: #F2EDE6;   /* lichte tekst */
  --color-cream-100: #FAF8F4;   /* bijna wit */

  /* Status kleuren */
  --color-success:  #1D9E75;    /* teal — Pillar 12 kleur */
  --color-warning:  #BA7517;    /* amber — Pillar 11 kleur */
  --color-error:    #9E3B1D;    /* rood-bruin */
  --color-info:     #1D6B9E;    /* blauw */


  /* ─── 2. KLEUR — SEMANTISCH ─────────────────────────────────────────────── */

  /* Achtergronden */
  --bg:             var(--color-black-900);   /* pagina achtergrond */
  --bg-2:           var(--color-black-850);   /* kaarten, modals */
  --bg-3:           var(--color-black-950);   /* verzonken secties */
  --bg-raised:      var(--color-black-800);   /* hover states, tooltips */

  /* Randen */
  --rule:           var(--color-black-700);   /* subtiele dividers */
  --border:         var(--color-gold-700);    /* zichtbare randen */
  --border-focus:   var(--color-gold-500);    /* focus states */

  /* Brand accent */
  --gold:           var(--color-gold-500);    /* basis accent */
  --gold-hi:        var(--color-gold-300);    /* helder accent, highlights */
  --gold-lo:        var(--color-gold-700);    /* gedempte accent */

  /* Tekst */
  --text-1:         var(--color-cream-400);   /* koppen, primaire inhoud */
  --text-2:         var(--color-cream-500);   /* body tekst */
  --text-3:         var(--color-cream-700);   /* labels, metadata */
  --text-4:         var(--color-cream-800);   /* placeholder, disabled */
  --text-5:         var(--color-cream-900);   /* fijnste details */
  --text-inverse:   var(--color-black-900);   /* tekst op lichte achtergrond */

  /* Interactief */
  --interactive:    var(--color-gold-500);
  --interactive-hi: var(--color-gold-300);
  --interactive-lo: var(--color-gold-700);


  /* ─── 3. TYPOGRAFIE ─────────────────────────────────────────────────────── */

  /* Families */
  --font-serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:      'Syncopate', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'Courier New', monospace;

  /* Groottes — fluid via clamp waar zinvol */
  --text-2xs:       6px;
  --text-xs:        7px;       /* labels, caps — Syncopate standaard */
  --text-sm:        0.875rem;  /* 14px */
  --text-base:      1rem;      /* 16px */
  --text-lg:        1.125rem;  /* 18px */
  --text-xl:        1.25rem;   /* 20px */
  --text-2xl:       1.5rem;    /* 24px */
  --text-3xl:       2rem;      /* 32px */
  --text-4xl:       clamp(28px, 4vw, 48px);
  --text-5xl:       clamp(36px, 6vw, 80px);  /* hero koppen */

  /* Gewichten */
  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Letter-spacing */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;
  --tracking-wider:   1px;
  --tracking-widest:  2px;
  --tracking-caps:    3px;     /* caps labels */
  --tracking-ultra:   4px;     /* Syncopate nav items */
  --tracking-max:     5px;     /* section eyebrows */

  /* Line-height */
  --leading-none:   1;
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;


  /* ─── 4. SPACING ────────────────────────────────────────────────────────── */

  /* 4px base grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Semantische spacing */
  --gap-xs:    var(--space-2);   /* 8px  — icoon + label */
  --gap-sm:    var(--space-3);   /* 12px — inline elementen */
  --gap-md:    var(--space-6);   /* 24px — standaard gap */
  --gap-lg:    var(--space-10);  /* 40px — sectie elementen */
  --gap-xl:    var(--space-12);  /* 48px — grid kolommen */
  --gap-2xl:   var(--space-20);  /* 80px — grote secties */

  /* Padding — containers */
  --pad-xs:    var(--space-3);   /* 12px */
  --pad-sm:    var(--space-4);   /* 16px */
  --pad-md:    var(--space-6);   /* 24px */
  --pad-lg:    var(--space-10);  /* 40px */
  --pad-xl:    var(--space-12);  /* 48px */
  --pad-2xl:   var(--space-20);  /* 80px */


  /* ─── 5. LAYOUT ─────────────────────────────────────────────────────────── */

  --nav-h:          64px;
  --max-w:          1440px;
  --max-w-content:  1200px;
  --max-w-text:     720px;
  --max-w-narrow:   480px;

  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-xl:      16px;
  --radius-full:    9999px;

  --shadow-sm:      0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold:    0 0 24px rgba(139,115,85,0.15);
  --shadow-gold-hi: 0 0 40px rgba(201,168,124,0.20);

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;


  /* ─── 6. MOTION ─────────────────────────────────────────────────────────── */

  --ease-out:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:    cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  350ms;
  --duration-enter: 400ms;

  --transition-base:   all var(--duration-base) var(--ease-out);
  --transition-color:  color var(--duration-base) var(--ease-out),
                       background-color var(--duration-base) var(--ease-out),
                       border-color var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-slow) var(--ease-out);


  /* ─── 7. COMPONENT TOKENS ───────────────────────────────────────────────── */

  /* Buttons */
  --btn-font:        var(--font-sans);
  --btn-size:        var(--text-xs);
  --btn-tracking:    var(--tracking-ultra);
  --btn-weight:      var(--weight-normal);
  --btn-h:           40px;
  --btn-pad-x:       var(--space-8);
  --btn-radius:      var(--radius-sm);
  --btn-transition:  var(--transition-color);

  --btn-primary-bg:       var(--gold-lo);
  --btn-primary-color:    var(--gold-hi);
  --btn-primary-border:   var(--gold-lo);
  --btn-primary-hover-bg: var(--gold);
  --btn-primary-hover-color: var(--color-black-900);

  --btn-ghost-bg:         transparent;
  --btn-ghost-color:      var(--text-3);
  --btn-ghost-border:     var(--rule);
  --btn-ghost-hover-border: var(--gold-lo);
  --btn-ghost-hover-color:  var(--gold);

  /* Product card */
  --card-bg:         var(--bg-2);
  --card-border:     var(--rule);
  --card-radius:     var(--radius-sm);
  --card-pad:        var(--space-6);
  --card-transition: var(--transition-base);

  /* Form inputs */
  --input-bg:        transparent;
  --input-border:    var(--rule);
  --input-focus:     var(--gold-lo);
  --input-color:     var(--text-1);
  --input-placeholder: var(--text-4);
  --input-font:      var(--font-serif);
  --input-h:         44px;
  --input-pad-x:     var(--space-4);
  --input-radius:    var(--radius-sm);

  /* Nav */
  --nav-bg:          rgba(13,12,11,0.95);
  --nav-border:      var(--rule);
  --nav-font:        var(--font-sans);
  --nav-size:        var(--text-xs);
  --nav-tracking:    var(--tracking-ultra);

  /* Modal/overlay */
  --overlay-bg:      rgba(10,9,8,0.85);
  --modal-bg:        var(--bg-2);

  /* Divider */
  --divider-color:   var(--rule);
  --divider-gold:    linear-gradient(
                       90deg,
                       transparent,
                       var(--gold-lo) 20%,
                       var(--gold) 50%,
                       var(--gold-lo) 80%,
                       transparent
                     );


  /* ─── 8. BACKWARD-COMPAT ALIASSEN ──────────────────────────────────────── */
  /* Behoud van korte namen die in bestaande HTML files gebruikt worden */

  --bg2:    var(--bg-2);          /* was: #100F0D */
  --bg3:    var(--bg-3);          /* was: #0A0908 */
  --serif:  var(--font-serif);    /* was: 'Cormorant Garamond'... */
  --sans:   var(--font-sans);     /* was: 'Syncopate'... */


  /* ─── 9. GLASMORFISME ───────────────────────────────────────────────────── */
  /* GlassGrasie signatuur effect — gebruik spaarzaam */

  --glass-bg:        rgba(13,12,11,0.60);
  --glass-border:    rgba(139,115,85,0.15);
  --glass-blur:      16px;
  --glass-shadow:    0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(201,168,124,0.06);

  /* Radial glow — achtergrond accent */
  --glow-gold:       radial-gradient(
                       ellipse 60% 50% at 80% 50%,
                       rgba(139,115,85,0.07) 0%,
                       transparent 65%
                     );
  --glow-center:     radial-gradient(
                       ellipse 40% 40% at 50% 50%,
                       rgba(139,115,85,0.05) 0%,
                       transparent 70%
                     );
}


/* ─── UTILITY CLASSES ───────────────────────────────────────────────────────── */
/* Optioneel — gebruik tokens direct in CSS, of gebruik deze helpers */

.glass {
  background: var(--glass-bg);
  border: 0.5px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.gold-rule {
  width: 100%;
  height: 0.5px;
  background: var(--divider-gold);
}

.rule {
  width: 100%;
  height: 0.5px;
  background: var(--divider-color);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-max);
  color: var(--gold-lo);
  text-transform: uppercase;
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ultra);
  color: var(--text-3);
  text-transform: uppercase;
}

.btn-primary {
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking);
  font-weight: var(--btn-weight);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border: 0.5px solid var(--btn-primary-border);
  cursor: pointer;
  transition: var(--btn-transition);
  text-transform: uppercase;
}

.btn-primary:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-hover-color);
  border-color: var(--gold);
}

.btn-ghost {
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking);
  font-weight: var(--btn-weight);
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-color);
  border: 0.5px solid var(--btn-ghost-border);
  cursor: pointer;
  transition: var(--btn-transition);
  text-transform: uppercase;
}

.btn-ghost:hover {
  border-color: var(--btn-ghost-hover-border);
  color: var(--btn-ghost-hover-color);
}