/* ═══════════════════════════════════════════
   DESIGN TOKENS — N&K Webdesign v2
   Warm, professional, modern
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-4xl:  clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-hero: clamp(2.75rem, 5.5vw, 5rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.75;

  --ls-tight:  -0.03em;
  --ls-snug:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;

  --c-bg:          #FAFAF8;
  --c-bg-2:        #F2F1ED;
  --c-bg-3:        #E8E6E0;
  --c-surface:     #FFFFFF;
  --c-dark:        #111110;
  --c-dark-2:      #1C1C1A;
  --c-dark-3:      #2A2A27;

  --c-brand:       #2D3BE0;
  --c-brand-2:     #1E2BB8;
  --c-brand-3:     #4D5CF0;
  --c-brand-soft:  rgba(45, 59, 224, 0.08);
  --c-brand-mid:   rgba(45, 59, 224, 0.15);

  --c-accent:      #E05C2D;
  --c-accent-2:    #C44E24;

  --c-text:        #111110;
  --c-text-2:      #4A4A46;
  --c-text-3:      #7A7A74;
  --c-text-inv:    #FAFAF8;
  --c-text-brand:  #2D3BE0;

  --c-border:      rgba(0,0,0,0.08);
  --c-border-2:    rgba(0,0,0,0.14);

  --c-success:     #1E6B3C;
  --c-success-bg:  #EAFAF0;
  --c-error:       #B91C1C;
  --c-error-bg:    #FEF2F2;

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-gap: clamp(4.5rem, 9vw, 8rem);

  --max-w:      1200px;
  --max-w-text: 640px;
  --max-w-sm:   480px;
  --gutter:     clamp(1.25rem, 5vw, 3rem);

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-full: 9999px;

  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.10), 0 6px 16px rgba(0,0,0,0.05);
  --shadow-brand: 0 8px 32px rgba(45, 59, 224, 0.22);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  160ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base:  280ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow:  480ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark-mode {
  --c-bg:          #111110;
  --c-bg-2:        #181816;
  --c-bg-3:        #222220;
  --c-surface:     #1C1C1A;
  --c-brand:       #5B6AF5;
  --c-brand-2:     #4D5CF0;
  --c-brand-3:     #7B88F8;
  --c-brand-soft:  rgba(91, 106, 245, 0.12);
  --c-brand-mid:   rgba(91, 106, 245, 0.20);
  --c-accent:      #F07040;
  --c-text:        #F0EFE9;
  --c-text-2:      #A8A8A0;
  --c-text-3:      #6A6A64;
  --c-text-inv:    #111110;
  --c-text-brand:  #5B6AF5;
  --c-border:      rgba(255,255,255,0.08);
  --c-border-2:    rgba(255,255,255,0.14);
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.5);
}