/* Stefan Kuper Design System — design tokens.
   Mirrors _ds/stefan-kuper-design-system-1b87865e.../tokens/*.css from the
   Claude Design project. Source of truth: Corporate Design Manual v1 (09.2025).
   Keep values in sync with the design system; do not hand-tune them here. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

:root {
  /* ---- Base palette (exact CMYK/RGB values from the manual) ---- */
  --sk-gray:      #575756; /* primary — main text/brand color, K80 */
  --sk-red:       #ec696b; /* primary — coral red accent */
  --sk-yellow:    #ffbe55; /* secondary — warm amber */
  --sk-purple:    #9184be; /* secondary — muted violet */
  --sk-cream:     #f9f2ec; /* secondary — warm off-white paper */
  --sk-lavender:  #e5d5fc; /* secondary — pale lilac */
  --sk-white:     #ffffff;

  /* ---- Tints & shades (derived, for hover/press/surfaces) ---- */
  --sk-gray-900:  #3d3d3c;
  --sk-gray-700:  #575756;
  --sk-gray-500:  #7d7d7b;
  --sk-gray-300:  #b3b3b1;
  --sk-gray-100:  #e6e6e4;
  --sk-red-dark:  #d8555a;
  --sk-red-soft:  #f6c3c4;
  --sk-yellow-dark: #f0a92f;
  --sk-purple-dark: #7a6ca8;

  /* Page-level neutrals used by the layouts (from the artboards) */
  --sk-body:      #6f6f6d; /* body copy on light surfaces */
  --sk-muted:     #9d9d9b; /* captions, eyebrow meta, footer legal */
  --sk-footer-fg: #c9c9c7;
  --sk-footer-rule: #6b6b6a;
  --sk-rule:      #f0efed;

  /* Tinted card surfaces (accent-bar cards) */
  --sk-tint-red:    #fdf4f4;
  --sk-tint-yellow: #fef8ee;
  --sk-tint-purple: #f6f3fb;
  --sk-tint-gray:   #f3f3f2;

  /* ---- Semantic aliases ---- */
  --text-heading:   var(--sk-gray);
  --text-body:      var(--sk-gray);
  --text-muted:     var(--sk-gray-500);
  --text-on-color:  var(--sk-white);
  --text-accent:    var(--sk-red);

  --surface-page:   var(--sk-white);
  --surface-paper:  var(--sk-cream);
  --surface-card:   var(--sk-white);
  --surface-accent: var(--sk-red);
  --surface-alt:    var(--sk-lavender);

  --border-subtle:  var(--sk-gray-100);
  --border-default: var(--sk-gray-300);

  /* ---- Störer / call-out defaults ---- */
  --stoerer-bg:     var(--sk-red);
  --stoerer-text:   var(--sk-white);
  --stoerer-tilt:   -7deg; /* manual: rotated 7° ascending */

  /* ---- Typography ---- */
  --font-sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:  'Caveat', 'Segoe Script', cursive; /* Caveat Bold */

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

  --fs-display: 4rem;    /* 64px hero */
  --fs-h1:      2.75rem; /* 44px */
  --fs-h2:      2rem;    /* 32px */
  --fs-h3:      1.5rem;  /* 24px */
  --fs-h4:      1.25rem; /* 20px */
  --fs-lg:      1.125rem;/* 18px */
  --fs-body:    1rem;    /* 16px */
  --fs-sm:      0.875rem;/* 14px */
  --fs-xs:      0.75rem; /* 12px */

  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-body:    1.6;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  /* ---- Spacing & layout (8px base rhythm) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1200px;

  /* The marketing pages use a 1120px container with 32px gutters. */
  --container:    1120px;
  --gutter:       32px;

  --logo-clearspace: 1em;

  /* ---- Effects: radii, shadows, motion ---- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(87,87,86,0.08);
  --shadow-md: 0 4px 14px rgba(87,87,86,0.10);
  --shadow-lg: 0 12px 32px rgba(87,87,86,0.14);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  360ms;
}