/* Neofoundry — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg: #0a0912; /* Void. Page background, near-black with a violet cast. */
  --card: #14121e; /* Background for cards and popups. Void lifted one step, same violet cast. Pair with a border. 15.41:1 for text, 1.07:1 against bg. */
  --text: #edeae4; /* Bone. Main font color. 16.49:1 on bg, 15.41:1 on card. */
  --text-secondary: #80e9f2; /* Secondary font color. A 50/50 mix of Arc and Bone. 14.01:1 on bg, 13.09:1 on card. */
  --text-muted: #979494; /* Muted text: captions, placeholders, helper text. Bone toward Void, 62%. 6.58:1 on bg, 6.15:1 on card. */
  --primary: #12e8ff; /* Arc. The main company brand color. Structure: borders, buttons, strong text, headings, focus ring. 13.21:1 on bg, 12.35:1 on card. */
  --on-primary: var(--bg); /* Text and icons on an Arc fill. 13.21:1. */
  --accent: #ff2e7e; /* Neon. Accents, alerts, danger, loading animations. Use sparingly. 5.6:1 on bg, 5.24:1 on card. Passes for text at any size. */
  --on-accent: var(--bg); /* Text and icons on a Neon fill. 5.6:1. */
  --core: #ffd08a; /* Core. The second brand color, used for warnings and other states that need to stand apart from Arc (success) and Neon (danger). 13.8:1 on bg, 12.9:1 on card. */
  --on-core: var(--bg); /* Text and icons on a Core fill. 13.8:1. */
  --border: var(--primary); /* Borders and dividers. Same as primary (Arc). */
  --success: var(--primary); /* Success states. Same as primary (Arc). Always paired with an icon or label. */
  --warning: var(--core); /* Warning states. Same as core. Always paired with an icon or label. */
  --danger: var(--accent); /* Danger and error states. Same as accent (Neon). Always paired with an icon or label. */
  --info: var(--text); /* Info states: neutral notices and tips. Same as text (Bone), on a card background with a 1px Bone border. Always paired with an icon or label. */
}
:root {
  --space-1: 4px; /* Icon-to-label gap, tight inline stuff. */
  --space-2: 8px; /* Between related controls, badge padding. */
  --space-3: 12px; /* Input and button padding (vertical). */
  --space-4: 16px; /* Card padding, default gutter, paragraph gap. */
  --space-6: 24px; /* Between form groups, card-to-card gap. */
  --space-8: 32px; /* Section inner padding on mobile. */
  --space-12: 48px; /* Gap between content blocks. */
  --space-16: 64px; /* Section padding on desktop. */
  --space-24: 96px; /* Hero and major section breaks. */
  --space-32: 128px; /* Large marketing-page rhythm. */
  --radius-none: 0; /* Every corner: buttons, cards, inputs, popups. No rounding. */
  --font-heading: "Oswald", sans-serif;
  --font-sub: "Unica One", sans-serif;
  --font-body: "IBM Plex Mono", ui-monospace, monospace;
  --text-display: 600 56px/60px var(--font-heading); /* Logo and hero heading. Oswald, primary color. */
  --text-h1: 600 40px/48px var(--font-heading); /* Main page heading. */
  --text-h2: 600 28px/36px var(--font-heading); /* Section heading. */
  --text-subheading: 400 22px/30px var(--font-sub); /* Sub headings. Unica One. */
  --text-quote: 400 20px/30px var(--font-sub); /* Block-quoted text and taglines. */
  --text-body: 400 15px/24px var(--font-body); /* Body text. IBM Plex Mono. */
  --text-small: 400 13px/20px var(--font-body); /* Captions and helper text. */
}
.display {
  font-family: var(--font-heading);
  font-size: 56px;
  line-height: 60px;
  font-weight: 600;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: 0;
}
.subheading {
  font-family: var(--font-sub);
  font-size: 22px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.quote {
  font-family: var(--font-sub);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
