/* Design Tokens — speelcello.nl */

:root {
  /* --- Kleuren --- */
  --color-cream:        #F7F3EE;
  --color-cream-dark:   #EDE7DC;
  --color-white:        #FDFCFB;

  --color-ink:          #1E1812;
  --color-ink-light:    #4A3F35;
  --color-ink-muted:    #7A6E63;

  --color-gold:         #8B6914;
  --color-gold-light:   #C9A84C;
  --color-gold-pale:    #F0E4C4;

  --color-focus:        #005EA2;
  --color-error:        #B32D00;

  /* --- Typografie --- */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

  --font-size-xs:      clamp(0.75rem,  1.5vw, 0.875rem);
  --font-size-sm:      clamp(0.875rem, 2vw,   1rem);
  --font-size-base:    clamp(1rem,     2.5vw, 1.125rem);
  --font-size-lg:      clamp(1.125rem, 3vw,   1.375rem);
  --font-size-xl:      clamp(1.375rem, 4vw,   1.75rem);
  --font-size-2xl:     clamp(1.75rem,  5vw,   2.5rem);
  --font-size-3xl:     clamp(2.25rem,  7vw,   3.75rem);
  --font-size-display: clamp(3rem,     9vw,   5.5rem);

  --line-height-tight: 1.2;
  --line-height-snug:  1.4;
  --line-height-base:  1.65;
  --line-height-loose: 1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.12em;
  --letter-spacing-widest:  0.2em;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;

  /* --- Witruimte --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --container-max: 1100px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* --- Borders & radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --border-cream: 1px solid var(--color-cream-dark);
  --border-gold:  1px solid var(--color-gold-light);

  /* --- Transities --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Schaduwen --- */
  --shadow-sm: 0 1px 3px rgba(30, 24, 18, 0.08);
  --shadow-md: 0 4px 12px rgba(30, 24, 18, 0.10);
  --shadow-lg: 0 8px 24px rgba(30, 24, 18, 0.12);

  /* --- Nav hoogte (voor skip-link offset) --- */
  --nav-height: 4rem;
}