/* Quadigy Design System v1
   Source assets: 2026 intro deck, About Quadigy PDF, final logo set.
*/

@font-face {
  font-family: "Grift";
  src: url("./assets/fonts/Grift_Variable-VF.ttf") format("truetype-variations"),
       url("./assets/fonts/Grift_Variable-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap");

:root {
  --q-blue: #2323ff;
  --q-green: #4eff00;
  --q-pink: #ff28a2;
  --q-yellow: #ffef00;

  --q-ink: #050411;
  --q-navy-950: #07051f;
  --q-navy-900: #0a0731;
  --q-navy-800: #151044;
  --q-navy-700: #211a5c;

  --q-white: #ffffff;
  --q-paper: #faf9f4;
  --q-paper-2: #f0eee4;
  --q-paper-3: #dfdbcf;

  --q-fg: var(--q-white);
  --q-fg-muted: rgba(255, 255, 255, 0.72);
  --q-fg-soft: rgba(255, 255, 255, 0.48);
  --q-bg: var(--q-navy-900);
  --q-surface: rgba(255, 255, 255, 0.045);
  --q-surface-strong: rgba(255, 255, 255, 0.08);
  --q-line: rgba(255, 255, 255, 0.14);
  --q-line-strong: rgba(255, 255, 255, 0.28);

  --q-accent: var(--q-yellow);
  --q-accent-fg: var(--q-ink);

  --q-font-sans: "Grift", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --q-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --q-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --q-display-xl: clamp(3.8rem, 8.5vw, 8rem);
  --q-display-lg: clamp(3.2rem, 6.5vw, 6.25rem);
  --q-h1: clamp(2.8rem, 5.6vw, 5.5rem);
  --q-h2: clamp(2.1rem, 3.8vw, 3.75rem);
  --q-h3: clamp(1.45rem, 2.3vw, 2.35rem);
  --q-body-lg: clamp(1.15rem, 1.5vw, 1.45rem);
  --q-body: 1rem;
  --q-small: 0.875rem;
  --q-micro: 0.75rem;

  --q-leading-tight: 0.94;
  --q-leading-heading: 1.08;
  --q-leading-body: 1.55;
  --q-tracking-mono: 0.14em;

  --q-space-1: 4px;
  --q-space-2: 8px;
  --q-space-3: 12px;
  --q-space-4: 16px;
  --q-space-5: 24px;
  --q-space-6: 32px;
  --q-space-7: 48px;
  --q-space-8: 64px;
  --q-space-9: 96px;
  --q-space-10: 128px;

  --q-radius-0: 0;
  --q-radius-1: 2px;
  --q-radius-2: 4px;
  --q-radius-3: 8px;
  --q-radius-pill: 999px;

  --q-grid-max: 1320px;
  --q-grid-gutter: clamp(20px, 4vw, 56px);
  --q-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --q-fast: 140ms;
  --q-base: 240ms;
}

[data-theme="light"] {
  --q-fg: var(--q-ink);
  --q-fg-muted: rgba(5, 4, 17, 0.72);
  --q-fg-soft: rgba(5, 4, 17, 0.48);
  --q-bg: var(--q-paper);
  --q-surface: rgba(5, 4, 17, 0.045);
  --q-surface-strong: rgba(5, 4, 17, 0.08);
  --q-line: rgba(5, 4, 17, 0.14);
  --q-line-strong: rgba(5, 4, 17, 0.28);
  --q-accent: var(--q-blue);
  --q-accent-fg: var(--q-white);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--q-bg);
  color: var(--q-fg);
  font-family: var(--q-font-sans);
  font-size: var(--q-body);
  line-height: var(--q-leading-body);
}

.q-container {
  width: min(var(--q-grid-max), calc(100% - var(--q-grid-gutter) * 2));
  margin-inline: auto;
}

.q-eyebrow {
  font-family: var(--q-font-mono);
  font-size: var(--q-micro);
  letter-spacing: var(--q-tracking-mono);
  text-transform: uppercase;
  color: var(--q-accent);
}

.q-display {
  margin: 0;
  font-family: var(--q-font-serif);
  font-size: var(--q-display-lg);
  font-weight: 500;
  line-height: var(--q-leading-tight);
  text-wrap: balance;
}

.q-heading {
  margin: 0;
  font-size: var(--q-h2);
  font-weight: 650;
  line-height: var(--q-leading-heading);
  text-wrap: balance;
}

.q-lede {
  max-width: 760px;
  color: var(--q-fg-muted);
  font-size: var(--q-body-lg);
  line-height: 1.42;
  text-wrap: pretty;
}

.q-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--q-accent);
  border-radius: var(--q-radius-pill);
  background: var(--q-accent);
  color: var(--q-accent-fg);
  font: 600 0.9rem/1 var(--q-font-sans);
  text-decoration: none;
  transition: background var(--q-fast) var(--q-ease), border-color var(--q-fast) var(--q-ease), transform var(--q-fast) var(--q-ease);
}

.q-button:hover {
  background: transparent;
  color: var(--q-accent);
}

.q-button:active {
  transform: translateY(1px);
}

.q-card {
  border: 1px solid var(--q-line);
  border-radius: var(--q-radius-2);
  background: var(--q-surface);
  padding: var(--q-space-6);
}

.q-card:hover {
  border-color: var(--q-line-strong);
}

.q-rule {
  border: 0;
  border-top: 1px solid var(--q-line);
}