/* Course Mark's own brand in the builder: soft charcoal, pink grapefruit and pastels,
   Outfit for headings and the logo. Loaded ONLY by the builder, after the other
   stylesheets (the website has its own copy in site.css). 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: #f7f6f4;   /* stone: the app's background, under white cards */
  --cd-ink: #302e33;
  --cd-ink-muted: #6f6d73;
  --cd-line: #eceae6;
  --cd-outline: #d9d6d0;
  --cd-grapefruit: #ffa79b;
  --cd-grapefruit-wash: #ffe9e5;
  --cd-butter: #f7dc8c;
  --cd-aqua: #c4e7e2;
  --cd-sky: #b4d9f6;
  --cd-lilac: #dcd3f2;
  --cd-pistachio: #cfe3b8;
  /* the same colours, pale, for backgrounds behind text */
  --cd-butter-wash: #fdf5dc;
  --cd-sky-wash: #e6f3fd;
  --cd-lilac-wash: #efeafa;
  --cd-pistachio-wash: #edf5e4;
  --cd-aqua-wash: #e3f3f0;
  --cd-font: 'Outfit', system-ui, sans-serif;
  /* older names the builder's styles still use: accents are grapefruit, and what was
     lagoon or deep orange (focus rings, selected options, accent text) is charcoal,
     since grapefruit is too light for text */
  --cd-drop: var(--cd-grapefruit);
  --cd-drop-soft: var(--cd-grapefruit-wash);
  --cd-drop-deep: var(--cd-ink);
  --cd-drop-text: var(--cd-ink);
  --cd-lagoon: var(--cd-ink);

  /* 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-grapefruit);
  --pink-soft: var(--cd-grapefruit-wash);
  --pink-ink: var(--cd-ink);
  --brand: var(--cd-ink);  /* main buttons: charcoal with white text, as on the website */
  --brand-ink: #ffffff;
  --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 Outfit. */
.cd-builder {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
.cd-builder :is(h1, h2) { font-weight: 500; letter-spacing: -.025em; }

/* Logo: the official logo (mark and wordmark), sized from the .logo font size.
   The mark alone shows only in the narrow course rail (editor.css .rail-mini). */
.logo { font-family: var(--cd-font); font-weight: 500; letter-spacing: -.035em; color: var(--cd-ink); white-space: nowrap; }
.logo-img { display: block; height: 1.35em; width: auto; }
.logo .logo-mark { display: none; width: 1.35em; height: 1.35em; }

/* Buttons are pills, like the website's */
.btn { border-radius: 99px; }
.btn.primary:hover { filter: none; background: #45424a; box-shadow: none; }

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

/* Links in Course Mark's own copy */
a { text-decoration-color: var(--cd-grapefruit); text-decoration-thickness: 2px; text-underline-offset: 3px; }