/* ============================================================
   VIANITY · DESIGN TOKENS
   Übernommen 1:1 aus dem Claude-Design-System (colors/typography/
   spacing). Selbst gehostete Fonts via fonts.css (generiert von
   fetch-fonts.js). Diese Datei definiert nur CSS-Variablen.
   ============================================================ */
@import url('./fonts.css?v=3004f9ec');

:root {
  /* ---- Brand anchor ---- */
  --vin-navy-900: #0d1b45;
  --vin-navy-800: #16245a;   /* wordmark navy — primary brand */
  --vin-navy-700: #1f3277;
  --vin-navy-600: #2b429a;
  --vin-sky-600:  #1f6fd6;   /* interactive / links */
  --vin-sky-500:  #2a7de1;
  --vin-sky-100:  #e4f0fd;

  /* ---- Spectrum (community circle) — categorical ---- */
  --vin-violet:  #7a2bb8;
  --vin-magenta: #cc1e8c;
  --vin-red:     #e23b33;
  --vin-orange:  #ec6f05;
  --vin-yellow:  #f5b916;
  --vin-green:   #3ba24a;
  --vin-teal:    #00a99d;
  --vin-blue:    #0a78c4;

  /* Tint backgrounds for each spectrum hue */
  --vin-violet-tint:  #f2e9fa;
  --vin-magenta-tint: #fbe6f2;
  --vin-red-tint:     #fce8e7;
  --vin-orange-tint:  #fdeede;
  --vin-yellow-tint:  #fdf3d8;
  --vin-green-tint:   #e6f4e8;
  --vin-teal-tint:    #ddf3f1;
  --vin-blue-tint:    #dcecf8;

  /* ---- Neutrals (cool, slight navy tint) ---- */
  --ink-950: #0b1220;
  --ink-900: #131c2e;
  --ink-800: #263149;
  --ink-700: #3a465f;
  --ink-600: #566175;
  --ink-500: #737d90;
  --ink-400: #99a1b0;
  --ink-300: #c3c9d4;
  --ink-200: #e0e4ea;
  --ink-100: #eef1f5;
  --ink-50:  #f6f8fb;
  --white:   #ffffff;

  /* ---- Semantic ---- */
  --success: #2f8f45;
  --success-tint: #e6f3e9;
  --warning: #d98a10;
  --warning-tint: #fbf0d9;
  --danger:  #d23b33;
  --danger-tint: #fce8e7;
  --info:    var(--vin-sky-600);
  --info-tint: var(--vin-sky-100);

  /* ---- Semantic aliases ---- */
  --brand:            var(--vin-navy-800);
  --brand-strong:     var(--vin-navy-900);
  --accent:           var(--vin-sky-600);

  --text-strong:      var(--ink-950);
  --text-body:        var(--ink-800);
  --text-muted:       var(--ink-600);
  --text-faint:       var(--ink-500);
  --text-on-brand:    var(--white);
  --text-link:        var(--vin-sky-600);

  --surface-page:     var(--ink-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-brand:    var(--vin-navy-800);
  --surface-invert:   var(--vin-navy-900);

  --border-subtle:    var(--ink-200);
  --border-default:   var(--ink-300);
  --border-strong:    var(--ink-400);
  --focus-ring:       var(--vin-sky-500);

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, monospace;

  --fs-display: 4.5rem;
  --fs-h1:      3rem;
  --fs-h2:      2.25rem;
  --fs-h3:      1.625rem;
  --fs-h4:      1.25rem;
  --fs-lg:      1.125rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

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

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.02em;
  --ls-caps:   0.08em;

  /* ---- Spacing (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:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(13, 27, 69, 0.06);
  --shadow-sm: 0 2px 6px rgba(13, 27, 69, 0.07), 0 1px 2px rgba(13,27,69,0.05);
  --shadow-md: 0 6px 18px rgba(13, 27, 69, 0.09), 0 2px 4px rgba(13,27,69,0.05);
  --shadow-lg: 0 16px 40px rgba(13, 27, 69, 0.12), 0 4px 10px rgba(13,27,69,0.06);
  --shadow-brand: 0 10px 28px rgba(22, 36, 90, 0.28);
  --ring: 0 0 0 3px rgba(42, 125, 225, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
}