/* MarianoOG — generated from tokens.json */
:root, [data-theme="dark"] {
  --grey-950: #0e0e10;
  --grey-900: #161618;
  --grey-800: #202023;
  --grey-700: #2c2c30;
  --grey-600: #67676f;
  --grey-500: #8e8e96;
  --grey-100: #ededee;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --amber-500: #f59e0b;
  --background: var(--grey-950);
  --surface: var(--grey-900);
  --surface-raised: var(--grey-800);
  --border: var(--grey-700);
  --border-strong: var(--grey-600);
  --foreground: var(--grey-100);
  --foreground-muted: var(--grey-500);
  --primary: var(--grey-100);
  --on-primary: var(--grey-950);
  --key: var(--blue-500);
  --counter: var(--amber-500);
  --ring: var(--blue-400);
  --lift: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
  --catch: -10px -10px 28px -12px rgba(59, 130, 246, 0.55), 10px 10px 28px -12px rgba(245, 158, 11, 0.4);
  --focus: 0 0 0 3px rgba(96, 165, 250, 0.3);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --space-16: 64px;
  --content-width: 1120px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --light-key: radial-gradient(70% 90% at 0% 0%, rgba(59,130,246,0.18), rgba(59,130,246,0) 70%);
  --light-counter: radial-gradient(60% 80% at 100% 100%, rgba(245,158,11,0.11), rgba(245,158,11,0) 70%);
  --gradient-light: linear-gradient(135deg, #3b82f6, #f59e0b);
  --duration-catch: 200ms;
  --duration-emerge: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --text-display: 600 48px/1.05 var(--font-sans);
  --text-title: 600 28px/1.2 var(--font-sans);
  --text-heading: 600 18px/1.4 var(--font-sans);
  --text-body: 400 16px/1.6 var(--font-sans);
  --text-small: 400 14px/1.5 var(--font-sans);
  --text-eyebrow: 400 12px/1.4 var(--font-mono);
}
.display {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.heading {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.08em;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}