/* Design tokens for kamal-mehta.com. Every color, size, and curve on the site comes from here. */
@font-face { font-family: "Sora"; font-weight: 400; font-display: swap; src: url("../assets/fonts/sora-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 600; font-display: swap; src: url("../assets/fonts/sora-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Sora"; font-weight: 700; font-display: swap; src: url("../assets/fonts/sora-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("../assets/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #04060c;
  --bg-2: #070b15;
  --bg-3: #0b1120;
  --panel: rgba(13, 19, 34, 0.66);
  --panel-solid: #0c1322;
  --panel-hi: rgba(22, 32, 56, 0.72);
  --line: rgba(128, 168, 255, 0.14);
  --line-strong: rgba(120, 208, 255, 0.4);

  /* ink */
  --text: #e9effc;
  --text-2: #a8b5d2;
  --text-3: #7383a4;
  --text-on-accent: #03121a;

  /* light */
  --accent: #4fd8ff;          /* signal cyan: the thing being explained */
  --accent-2: #8f7dff;        /* violet: the model, the learned part */
  --accent-3: #36f0b0;        /* mint: a measured result */
  --warn: #ffb454;            /* amber: the problem, the before */
  --bad: #ff6b81;             /* a failure or fault */
  --muted-mark: #3a4766;      /* a mark that is present but not the point */
  --grad: linear-gradient(120deg, var(--accent), var(--accent-2));
  --grad-soft: linear-gradient(120deg, rgba(79, 216, 255, 0.16), rgba(143, 125, 255, 0.16));
  --glow: 0 0 0 1px rgba(79, 216, 255, 0.22), 0 0 42px rgba(79, 216, 255, 0.12);
  --glow-strong: 0 0 0 1px rgba(79, 216, 255, 0.5), 0 0 60px rgba(79, 216, 255, 0.22);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* type */
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --fs-hero: clamp(2.6rem, 6.2vw, 5.4rem);
  --fs-h1: clamp(2rem, 4vw, 3.2rem);
  --fs-h2: clamp(1.4rem, 2.4vw, 2rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.78rem;        /* mono labels, tracked wide, upper case */
  --track-wide: 0.12em;

  /* shape and space */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;
  --cut: 14px;                /* size of the chamfered corner on framed panels */
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1240px;
  --section: clamp(72px, 11vw, 148px);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 420ms;
  --t-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}