/* ==========================================================================
   Mani Design — Design Tokens
   Direction: "Confident Craft" — warm paper background, ink-black type,
   teal/blue brand duo used as bold color-blocks (not gradients), brush-stroke
   accents echoing the logo, oversized geometric display type + calm body sans.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --paper:        #F7F4EC;
  --paper-raised: #FFFFFF;
  --ink:          #14151A;
  --ink-soft:     #52534B;
  --ink-faint:    #8A8B80;
  --line:         rgba(20, 21, 26, 0.12);
  --line-strong:  rgba(20, 21, 26, 0.22);

  /* ---- Color: brand ---- */
  --teal:         #0FA89A;
  --teal-deep:    #0A6E64;
  --teal-tint:    #E3F5F2;
  --blue:         #2C4BF2;
  --blue-deep:    #1B2E9E;
  --blue-tint:    #E7EAFD;

  /* ---- Color: semantic ---- */
  --success:      #1E8E5A;
  --success-tint: #E4F5EC;
  --error:        #C23A2E;
  --error-tint:   #FBE9E7;

  /* ---- Color: on-brand text ---- */
  --on-ink:       #F7F4EC;
  --on-teal:      #04211E;
  --on-blue:      #EDEFFF;

  /* ---- Type (system fonts only, keine externen Font-Requests) ---- */
  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-logo:    Georgia, 'Times New Roman', Times, serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.65rem + 1.2vw, 2.6rem);
  --step-4:  clamp(2.6rem, 2.1rem + 2.2vw, 3.8rem);
  --step-5:  clamp(3.4rem, 2.6rem + 3.8vw, 5.6rem);

  /* ---- Space scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Shape ---- */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* ---- Elevation (flat design: hairlines over shadow, shadow used sparingly) ---- */
  --shadow-card: 0 1px 2px rgba(20,21,26,0.05), 0 8px 24px -12px rgba(20,21,26,0.18);
  --shadow-pop:  0 12px 32px -8px rgba(20,21,26,0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.68,0,1);
  --dur-s: 160ms;
  --dur-m: 320ms;
  --dur-l: 560ms;

  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}