/* Course Drop's own brand (tangerine + lagoon, Plus Jakarta Sans).
   Loaded ONLY by Course Drop's pages (home + builder), after the other
   stylesheets. It is not bundled into student pages (build.mjs bundles
   app.css + src/public.css only), so creators' sales pages and course
   players keep their own colours and fonts. The lesson editor canvas
   sets the creator's --brand and fonts inline, so it is unaffected too. */
:root {
  --cd-surface: #fbf6ee;
  --cd-ink: #1f2a2b;
  --cd-ink-muted: #5b6664;
  --cd-line: #e6dccd;
  --cd-drop: #ff6a3d;
  --cd-drop-soft: #ffe6dc;
  --cd-drop-deep: #c2410c;
  --cd-drop-text: #9a3412;
  --cd-lagoon: #0f5257;
  --cd-butter: #ffd166;
  --cd-font: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* map the app's existing variables onto the brand */
  --cream: var(--cd-surface);
  --ink: var(--cd-ink);
  --ink-2: var(--cd-ink-muted);
  --line: var(--cd-line);
  --pink: var(--cd-drop);
  --pink-soft: var(--cd-drop-soft);
  --pink-ink: var(--cd-drop-text);
  --brand: var(--cd-drop);
  --brand-ink: var(--cd-ink);
  --font-head: var(--cd-font);
  --font-body: var(--cd-font);
}

/* The builder keeps the device's own font for its compact 13px UI;
   only headings and the logo use Plus Jakarta Sans. */
.cd-builder {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Home page headings at the brand's weight (the builder sets its own) */
:root:not(.cd-builder) :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: -.02em; }

/* Logo: the drop mark beside the wordmark in lagoon */
.logo { font-family: var(--cd-font); font-weight: 700; letter-spacing: -.035em; color: var(--cd-lagoon); }
.logo-mark { width: 1.6em; height: 1.6em; flex: none; display: block; }

/* Focus ring: solid lagoon, readable on every surface */
.btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--cd-lagoon); outline-offset: 2px;
}
.font-card:has(input:focus-visible) { outline: 2px solid var(--cd-lagoon); outline-offset: 2px; }

/* Links in Course Drop's own copy */
a { text-decoration-color: var(--cd-drop-deep); }