/* ==========================================================================
   DRAFT roadmap bubbles · component tokens (--cf-bubble-*, --cf-status-*, --cf-trail-*)
   For drafts/2026-10-26-roadmap-v1/. Not live. Drafts only. Sascha deploys.
   Owner: Web Designer, 2026-10-26 (Asia/Bangkok).
   Layout: briefs/layout-specs-roadmap-bubbles-2026-10-26.md
   Source sketch: briefs/roadmap-bubble-sketch-2026-10-26.md

   ADD-ON ONLY. This file does NOT redefine the system. Every value below is
   either a var() into the dual-world night palette or a low-alpha tint of
   an existing dual-world colour (amber #d4a574, warm text #c4bcae / #9c9486).
   No new hues. No green. No cyan. No glow, no keyframes, no transitions.

   Load order (roadmap.html):
     1. styles/cf-tokens.css           (copy of briefs/cf-tokens-dual-world-v1.css, unedited)
     2. styles/cf-tokens-roadmap.css   (this file)
     3. styles/main.css                (copy of dual-world-v1 main.css)
     4. styles/roadmap.css             (component CSS from the layout spec)
     5. cefrite-motion.css, then cm-reveal.js
   If loaded before dual-world tokens, every var() below resolves to nothing.
   ========================================================================== */

:root {
  /* Trail (the list of bubbles) */
  --cf-trail-measure: 44rem;          /* NEW. Trail column. Prose inside bubbles still capped at --cf-measure-read */
  --cf-trail-gap: var(--cf-space-6);  /* 24px between bubbles, mobile */
  --cf-trail-gap-md: var(--cf-space-8); /* 32px between bubbles, >=768px */
  --cf-trail-line: var(--cf-line-strong); /* connector rule colour (#34312d) */
  --cf-trail-line-width: 1px;
  --cf-trail-line-opacity: 0.7;       /* NEW. Keeps the rule a whisper, never a progress bar */

  /* Bubble (one roadmap item) */
  --cf-bubble-bg: var(--cf-card);
  --cf-bubble-border: var(--cf-line);
  --cf-bubble-radius: var(--cf-radius-lg);
  --cf-bubble-pad: var(--cf-space-5, 20px); /* 20px mobile (no --cf-space-5 in system; literal fallback) */
  --cf-bubble-pad-md: var(--cf-space-6);    /* 24px >=768px */
  --cf-bubble-col-gap: var(--cf-space-4);   /* 16px index tile to content */
  --cf-bubble-col-gap-md: var(--cf-space-6);/* 24px >=768px */

  /* Index tile (01..06) */
  --cf-bubble-index-size: 40px;       /* matches Science ol.steps numeral tile */
  --cf-bubble-index-bg: var(--cf-navy);
  --cf-bubble-index-border: var(--cf-line);
  --cf-bubble-index-color: var(--cf-accent-dim); /* amber dim, not full accent */

  /* Status chips: muted night tones. Text label always present (never colour-only). */
  --cf-status-fs: var(--cf-fs-badge);   /* 11px */
  --cf-status-ls: var(--cf-ls-badge);   /* 0.1em */
  --cf-status-h: 24px;
  --cf-status-pad-x: 10px;

  /* Done: soft amber tint, low opacity. The only warm chip. */
  --cf-status-done-bg: rgba(212, 165, 116, 0.10);
  --cf-status-done-border: rgba(212, 165, 116, 0.28);  /* = --cf-accent-line */
  --cf-status-done-text: var(--cf-accent);

  /* In progress: neutral outline, soft text */
  --cf-status-progress-bg: transparent;
  --cf-status-progress-border: var(--cf-line-strong);
  --cf-status-progress-text: var(--cf-text-soft);

  /* Ongoing: faint warm-grey fill, muted text */
  --cf-status-ongoing-bg: rgba(196, 188, 174, 0.06);   /* --cf-text-soft at 6% */
  --cf-status-ongoing-border: var(--cf-line);
  --cf-status-ongoing-text: var(--cf-text-muted);

  /* Soft: dashed outline, quietest text */
  --cf-status-soft-bg: transparent;
  --cf-status-soft-border: var(--cf-line-strong);      /* drawn dashed */
  --cf-status-soft-text: var(--cf-text-micro);
}