/* GoedOnline — design tokens. Zakelijk, ingehouden palet. */

:root {
  /* Brand — deep slate met één rustige cobalt-accent */
  --color-slate-950: #0B1220;
  --color-slate-900: #111A2E;
  --color-slate-800: #1A263F;
  --color-slate-700: #283449;
  --color-slate-600: #3B475E;
  --color-slate-500: #5A6781;
  --color-slate-400: #8492AB;
  --color-slate-300: #B6C0D2;
  --color-slate-200: #D6DCE7;
  --color-slate-100: #ECF0F6;
  --color-slate-50:  #F6F8FB;

  --color-cobalt-700: #1F3A8A;
  --color-cobalt-600: #2A4FB8;
  --color-cobalt-500: #3B62D9;
  --color-cobalt-400: #6E89E6;
  --color-cobalt-300: #B5C4F0;
  --color-cobalt-100: #E5EBF8;

  --color-amber-500: #C8923A;   /* warm subtiel accent voor sale-prijzen, sparing gebruiken */
  --color-amber-100: #FAF1DD;

  /* Neutrals (warm offwhite) */
  --color-cream-50:  #FAF8F4;   /* warme achtergrond, alternatief voor pure wit */
  --color-cream-100: #F4F1EA;
  --color-cream-200: #ECE7DD;

  --color-ink:        #0E1626;
  --color-ink-soft:   #36425A;
  --color-mute:       #6A7691;
  --color-mute-soft:  #99A4BC;
  --color-line:       #E2E6EE;
  --color-line-soft:  #EFF2F7;
  --color-surface:    #FFFFFF;
  --color-surface-alt: var(--color-cream-50);
  --color-surface-dim: var(--color-slate-100);

  /* Semantic */
  --color-bg: var(--color-surface);
  --color-fg: var(--color-ink);
  --color-primary: var(--color-slate-900);
  --color-primary-fg: #FFFFFF;
  --color-accent: var(--color-cobalt-600);
  --color-accent-soft: var(--color-cobalt-500);
  --color-accent-contrast: #FFFFFF;
  --color-cta: var(--color-slate-900);    /* CTA = ink primary, niet meer lime */
  --color-cta-hover: var(--color-slate-800);
  --color-cta-fg: #FFFFFF;
  --color-success: #1F8A5C;
  --color-danger:  #B23A4D;
  --color-warning: #B07A1F;
  --color-sale:    var(--color-amber-500);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-serif: 'Source Serif Pro', 'Iowan Old Style', 'Apple Garamond', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --fs-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm:  clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.91rem + 0.2vw, 1rem);
  --fs-md:  clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
  --fs-lg:  clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --fs-xl:  clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --fs-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --fs-3xl: clamp(2.5rem, 2rem + 2.4vw, 3.625rem);
  --fs-display: clamp(2.75rem, 2.1rem + 3.4vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-display: -0.035em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* Spacing — 4-pt scale */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;
  --sp-13: 10rem;

  --container: 1200px;
  --container-narrow: 880px;
  --container-wide: 1320px;
  --gutter: clamp(1rem, 3vw, 2rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  /* Radius — kleiner, zakelijker */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Shadow — fijner en zachter */
  --sh-xs: 0 1px 2px rgba(14, 22, 38, .04);
  --sh-sm: 0 2px 6px -1px rgba(14, 22, 38, .06), 0 1px 2px rgba(14, 22, 38, .04);
  --sh-md: 0 8px 20px -8px rgba(14, 22, 38, .12), 0 2px 6px -2px rgba(14, 22, 38, .06);
  --sh-lg: 0 24px 48px -16px rgba(14, 22, 38, .16), 0 6px 16px -8px rgba(14, 22, 38, .08);
  --sh-xl: 0 36px 80px -24px rgba(14, 22, 38, .22);
  --sh-glow: 0 0 0 4px rgba(42, 79, 184, .12);
  --sh-inset-line: inset 0 0 0 1px var(--color-line);

  /* Motion — kalmer */
  --dur-1: 100ms;
  --dur-2: 180ms;
  --dur-3: 280ms;
  --dur-4: 440ms;
  --dur-5: 700ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* Z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
    --dur-5: 0ms;
  }
}