/*
 * MKDSGN Index — design tokens.
 *
 * One palette, one type scale, one radius scale. Everything else inherits.
 */

/* --------------------------------------------------------------------- */
/* Fonts                                                                   */
/* --------------------------------------------------------------------- */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/SpaceGrotesk-VariableFont_wght.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-VariableFont_wght.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/Mona-Sans.woff2") format("woff2");
}

:root {
  /* Color */
  --mk-bg: #08090c;
  --mk-bg-raised: #0d0f14;
  --mk-bg-sunken: #050609;
  --mk-surface: #11141a;
  --mk-line: #1c2027;
  --mk-line-soft: #14171d;
  --mk-line-strong: #2a2f38;

  --mk-ink: #f2f4f7;
  --mk-ink-muted: #9aa3b0;
  --mk-ink-dim: #7a8492;

  --mk-accent: #315cff;
  --mk-accent-ink: #809bff;
  --mk-accent-soft: rgba(49, 92, 255, 0.14);
  --mk-accent-line: rgba(49, 92, 255, 0.42);

  /* Type */
  --mk-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mk-font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --mk-font-mono: "Mona Sans", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --mk-size-hero: clamp(2.75rem, 7.4vw, 6.5rem);
  --mk-size-h2: clamp(1.9rem, 3.4vw, 3.1rem);
  --mk-size-h3: clamp(1.15rem, 1.5vw, 1.4rem);
  --mk-size-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --mk-size-body: 1rem;
  --mk-size-small: 0.875rem;
  --mk-size-micro: 0.75rem;

  --mk-track-tight: -0.035em;
  --mk-track-mono: 0.16em;

  /* Space */
  --mk-gutter: clamp(1.25rem, 4vw, 4rem);
  --mk-section: clamp(4.5rem, 9vw, 9rem);
  --mk-rail: 4.5rem;
  --mk-max: 86rem;

  /* Shape */
  --mk-radius: 2px;
  --mk-radius-lg: 4px;

  /* Motion */
  --mk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mk-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mk-dur: 0.55s;
}