/* Cadrix design tokens */
:root {
  /* brand */
  --ink: #0b0e14;
  --navy: #0f1420;
  --navy-2: #161d2e;
  --navy-3: #1f283b;
  --paper: #faf9f6;
  --paper-2: #f2f0ea;
  --white: #ffffff;
  --orange: #ff7a1a;
  --orange-2: #ff9a4d;
  --orange-ink: #c4500a; /* orange that passes contrast on paper */
  --violet: #6d4aff;
  --violet-2: #9279ff;
  --teal: #19c3a6;

  /* type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.7s;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 136px);
  --header-h: 68px;

  /* shadows (layered, soft) */
  --shadow-sm: 0 1px 2px rgba(11, 14, 20, 0.06), 0 2px 8px rgba(11, 14, 20, 0.04);
  --shadow-md: 0 2px 4px rgba(11, 14, 20, 0.05), 0 8px 24px rgba(11, 14, 20, 0.08), 0 24px 48px -12px rgba(11, 14, 20, 0.1);
  --shadow-lg: 0 4px 8px rgba(11, 14, 20, 0.06), 0 16px 40px rgba(11, 14, 20, 0.12), 0 48px 96px -24px rgba(11, 14, 20, 0.28);
  --shadow-glow: 0 0 0 1px rgba(255, 122, 26, 0.35), 0 12px 40px -8px rgba(255, 122, 26, 0.45);
}

/* section themes: swap these to flip a section between light and dark */
.theme-light {
  --bg: var(--paper);
  --fg: #10131a;
  --fg-2: #4a5262;
  --fg-3: #6b7486;
  --line: rgba(16, 19, 26, 0.1);
  --line-strong: rgba(16, 19, 26, 0.18);
  --surface: #ffffff;
  --surface-2: var(--paper-2);
  --accent-text: var(--orange-ink);
  --card-shadow: var(--shadow-sm);
}
.theme-white {
  --bg: #ffffff;
  --fg: #10131a;
  --fg-2: #4a5262;
  --fg-3: #6b7486;
  --line: rgba(16, 19, 26, 0.1);
  --line-strong: rgba(16, 19, 26, 0.18);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --accent-text: var(--orange-ink);
  --card-shadow: var(--shadow-sm);
}
.theme-dark,
.theme-ink {
  --bg: var(--navy);
  --fg: #f3f4f8;
  --fg-2: #a9b1c3;
  --fg-3: #7d879c;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --accent-text: var(--orange);
  --card-shadow: none;
}
.theme-ink { --bg: var(--ink); }