:root {

  --mn-violet:        oklch(0.55 0.26 285);
  --mn-violet-strong: oklch(0.50 0.24 285);
  --mn-violet-ink:    oklch(0.35 0.12 285);
  --mn-teal:          oklch(0.74 0.13 205);
  --mn-teal-ink:      oklch(0.42 0.10 205);
  --mn-coral:         oklch(0.68 0.16 28);
  --mn-coral-ink:     oklch(0.48 0.15 28);

  --mn-violet-rgb:    110, 64, 254;

  --mn-ink-rgb:       23, 21, 31;

  --mn-focus-ring:    var(--mn-violet);

  --mn-violet-tint:   oklch(0.97 0.02 285);
  --mn-teal-tint:     oklch(0.96 0.04 205);
  --mn-coral-tint:    oklch(0.96 0.05 28);

  --mn-ink:      #17151F;
  --mn-muted:    #56545F;
  --mn-faint:    #706D7C;
  --mn-bg:       #FFFFFF;
  --mn-surface:  oklch(0.98 0.015 285);
  --mn-hairline: #EFEDF4;
  --mn-dark:     #1B1730;
  --mn-dark-fg:  #F2F0F8;

  --mn-on-violet-muted: #E3DDF7;

  --mn-font-display: 'Familjen Grotesk', system-ui, sans-serif;
  --mn-font-body:    'Onest', system-ui, sans-serif;
  --mn-font-mono:    ui-monospace, Menlo, monospace;

  --mn-text-display: clamp(40px, 5.4vw, 58px);
  --mn-text-h2:      clamp(28px, 3.4vw, 36px);
  --mn-text-h3:      clamp(21px, 2.4vw, 25px);

  --mn-text-lead:    clamp(17px, 3.4vw, 19px);
  --mn-text-title:   18px;
  --mn-text-body:    16px;
  --mn-text-sm:      14px;
  --mn-text-xs:      12px;

  --mn-radius-sm: 7px;
  --mn-radius:    9px;
  --mn-radius-lg: 14px;
  --mn-radius-xl: 18px;

  --mn-space-1: 4px; --mn-space-2: 8px; --mn-space-3: 12px; --mn-space-4: 16px;
  --mn-space-6: 24px; --mn-space-8: 32px; --mn-space-12: 48px; --mn-space-16: 64px;

  --mn-space-10: 40px; --mn-space-14: 56px; --mn-space-18: 72px; --mn-space-20: 80px;

  --mn-section-y: 64px;

  --mn-dur-xs:  .15s;
  --mn-dur-sm:  .2s;
  --mn-dur-md:  .3s;
  --mn-dur-lg:  .4s;
  --mn-dur-xl:  .5s;

  --mn-ease-standard:  cubic-bezier(.4, 0, .2, 1);
  --mn-ease-out:       cubic-bezier(.22, 1, .36, 1);
  --mn-ease-out-soft:  cubic-bezier(.22, .61, .36, 1);
  --mn-ease-in-out:    cubic-bezier(.45,.05,.2,1);
  --mn-ease-overshoot: cubic-bezier(.34, 1.56, .64, 1);

  --mn-marl-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27hm%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.055%200.13%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27240%27%20height%3D%27240%27%20filter%3D%27url%28%23hm%29%27%2F%3E%3C%2Fsvg%3E");

  --mn-grain-solid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%270%27%20intercept%3D%271%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23g%29%27%2F%3E%3C%2Fsvg%3E");
  --mn-grain-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%23n%29%27/%3E%3C/svg%3E");

  --mn-shadow-card: 0 2px 6px rgba(var(--mn-ink-rgb), .06), 0 24px 60px -34px rgba(var(--mn-violet-rgb),.28);
  --mn-shadow-sm:   0 1px 3px rgba(var(--mn-ink-rgb), .08);

  --mn-elev-contact: 0 1px 3px rgba(var(--mn-ink-rgb), .22);
  --mn-elev-near:    0 0 13px -4px rgba(var(--mn-violet-rgb), .22),
                     0 -9px 19px -10px rgba(var(--mn-violet-rgb), .34),
                     0  9px 19px -10px rgba(var(--mn-violet-rgb), .34),
                     var(--mn-elev-contact);
  --mn-elev-surface: 0 0 30px -9px rgba(var(--mn-violet-rgb), .20),
                     0 -22px 44px -24px rgba(var(--mn-violet-rgb), .34),
                     0  22px 44px -24px rgba(var(--mn-violet-rgb), .34),
                     0 1px 3px rgba(var(--mn-ink-rgb), .07);
}

body { margin: 0; background: var(--mn-bg); color: var(--mn-ink); font-family: var(--mn-font-body); }
h1,h2,h3 { font-family: var(--mn-font-display); letter-spacing: -0.02em; }
a { color: var(--mn-violet); text-decoration: none; }
a:hover { color: var(--mn-violet-strong); }