/* CourseFoundry design tokens — import before component styles. */
:root {
  --cf-void: #080a0d;
  --cf-carbon: #11151b;
  --cf-slate: #202833;
  --cf-blueprint: #0757e8;
  --cf-electric: #45a2ff;
  --cf-parchment: #f3ede2;
  --cf-cream: #d9d1c4;
  --cf-steel: #8c96a3;
  --cf-ink: #11151b;

  --cf-font-sans: Manrope, Arial, sans-serif;
  --cf-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --cf-shell: min(1200px, calc(100% - 64px));
  --cf-grid-unit: 32px;
  --cf-radius: 2px;
  --cf-rule: 1px solid var(--cf-slate);
  --cf-shadow: 0 20px 60px rgb(0 0 0 / 0.22);
  --cf-focus: 0 0 0 3px rgb(69 162 255 / 0.35);
}

.cf-grid-surface {
  background-color: var(--cf-carbon);
  background-image:
    linear-gradient(rgb(69 162 255 / 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgb(69 162 255 / 0.10) 1px, transparent 1px);
  background-size: var(--cf-grid-unit) var(--cf-grid-unit);
}

.cf-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cf-electric);
  font: 500 11px/1.2 var(--cf-font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cf-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.cf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--cf-parchment);
  border-radius: var(--cf-radius);
  background: var(--cf-parchment);
  color: var(--cf-ink);
  font: 800 12px/1 var(--cf-font-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.cf-button:hover { box-shadow: inset 0 -3px 0 var(--cf-blueprint); transform: translateY(-2px); }
.cf-button:focus-visible { outline: 0; box-shadow: var(--cf-focus); }
.cf-button--secondary { background: transparent; color: var(--cf-parchment); border-color: var(--cf-slate); }

.cf-card { border: var(--cf-rule); border-radius: var(--cf-radius); background: var(--cf-carbon); color: var(--cf-parchment); box-shadow: var(--cf-shadow); }

@media (max-width: 800px) { :root { --cf-shell: min(100% - 40px, 1200px); } }