/* ============================================================
   BDG · the skin: its palette on both grounds, the accent, the shade step
   and the night look's corners. The rules the old lab's lab.css gave the
   site (its demo skins and page view, lines 17–87 and 229–258), without
   the lab's chrome. Ported 2026-09-15.
   ============================================================ */
:root[data-theme="dark"] {
  --brand:      #e30039;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-dark: color-mix(in oklab, var(--brand) 80%, #000);
  --brand-ink:  #ff2a52;   /* the red as small text: 5.0:1 on --bg, 4.6:1 on --surface */
  --bg:       #070b14;
  --bg-2:     #0b1120;
  --bg-3:     #0d1322;
  --surface:  #141c30;
  --fg:       #ffffff;
  --fg-muted: #98a0b3;
  --fg-dim:   #7c8497;     /* 5.3:1 on --bg */
  --hairline: rgba(255, 255, 255, .12);
  --on-brand: #ffffff;
  --err:      #e5484d;
  --img-filter: saturate(.85);

  --lab-page: #02050b;
  --lab-fg:   #e9ecf2;
  --lab-dim:  #8a91a2;
  --lab-line: rgba(255, 255, 255, .1);
  --lab-tint: rgba(255, 255, 255, .06);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --brand:      #e30039;
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-dark: color-mix(in oklab, var(--brand) 80%, #000);
  --brand-ink:  #c9002f;   /* the red as small text: 5.5:1 on --bg, 5.0:1 on --bg-2 */
  --bg:       #f6f5f1;
  --bg-2:     #edebe5;
  --bg-3:     #ffffff;
  --surface:  #ffffff;
  --fg:       #121316;
  --fg-muted: #45474d;
  --fg-dim:   #5f6168;     /* 5.7:1 on --bg, 5.2:1 on --bg-2 */
  --hairline: rgba(18, 19, 22, .12);
  --on-brand: #ffffff;
  --err:      #c4262e;
  --img-filter: saturate(.92);

  --lab-page: #e2e0d9;
  --lab-fg:   #16171a;
  --lab-dim:  #55575e;
  --lab-line: rgba(18, 19, 22, .12);
  --lab-tint: rgba(18, 19, 22, .05);
  color-scheme: light;
}
/* Ink: no brand colour at all — the accent becomes the text colour. */
:root[data-accent="ink"] {
  --brand: var(--fg) !important;
  --brand-ink: var(--fg);
  --on-brand: var(--bg);
  --brand-dark: color-mix(in srgb, var(--fg) 82%, var(--bg));
  --brand-soft: color-mix(in srgb, var(--fg) 12%, transparent);
}

:root {
  --lab-ui: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --lab-bar-h: 50px;
}
html { background: var(--lab-page); }
/* The kit reserves room at the foot for its sticky CTA bar; the lab has none. */
html body { padding-bottom: 0; background: var(--bg); }

/* ---------- a gap in the kit, used by candidates ----------
   The kit styles icons per component (.tile svg, .facts svg). Candidates
   that place an icon elsewhere use WBS.icon(), which emits .ico. Graduating
   such a candidate means adding this one rule to components.css. */
.ico {
  width: var(--icon-inline, 20px); height: var(--icon-inline, 20px); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke, 1.5);
  stroke-linecap: round; stroke-linejoin: round;
}
:root {
  --dark-bg: #070b14; --dark-bg-2: #0b1120; --dark-bg-3: #0d1322; --dark-surface: #141c30;
  --dark-fg: #ffffff; --dark-fg-muted: #98a0b3; --dark-fg-dim: #7c8497;
  --dark-hairline: rgba(255, 255, 255, .12); --dark-err: #ff6b78; --dark-field-edge: #646c7e;
  --dark-img-filter: saturate(.85);
  --light-bg: #f6f5f1; --light-bg-2: #edebe5; --light-bg-3: #ffffff; --light-surface: #ffffff;
  --light-fg: #121316; --light-fg-muted: #45474d; --light-fg-dim: #5f6168;
  --light-hairline: rgba(18, 19, 22, .12); --light-err: #c4262e; --light-field-edge: #858b96;
  --light-img-filter: saturate(.92);
  /* BDG night look (2026-09-11, the user): square buttons, cards and photos to match */
  --radius-btn: 4px; --radius-card: 8px;
}
:root[data-theme="dark"] { --bg-shade: var(--dark-bg-shade); }
:root[data-theme="light"] { --bg-shade: var(--light-bg-shade); }
/* The shade step on trial. Clear is the kit's default (tokens.css), except
   that on a dark ground the shade is now always a step darker (the user,
   2026-09-11): the last rule below overrides the dark side of every step. */
:root[data-shade="subtle"] {
  --dark-bg-shade: color-mix(in oklab, var(--dark-bg), var(--dark-fg) 3.5%);
  --light-bg-shade: color-mix(in oklab, var(--light-bg), var(--light-fg) 2.5%);
}
:root[data-shade="clear"], :root[data-shade="opposite"], :root[data-shade="off"] {
  --dark-bg-shade: color-mix(in oklab, var(--dark-bg), var(--dark-fg) 6%);
  --light-bg-shade: color-mix(in oklab, var(--light-bg), var(--light-fg) 4%);
}
:root[data-shade="deep"] {
  --dark-bg-shade: color-mix(in oklab, var(--dark-bg), #000 55%);
  --light-bg-shade: color-mix(in oklab, var(--light-bg), #fff 80%);
}
:root[data-shade] { --dark-bg-shade: color-mix(in oklab, var(--dark-bg), #000 15%); }