/* ==========================================================================
   DRAFT dual-world-v1 night-readable biolab · design tokens (--cf-*)
   For drafts/2026-10-26-dual-world-v1/. Not live. Drafts only. Sascha deploys.
   Owner: Web Designer, 2026-10-26 (Asia/Bangkok).
   Lock: briefs/dual-world-visual-lock-2026-10-26.md
   Layout: briefs/layout-specs-science-founder-2026-10-26.md
   Supersedes briefs/cf-tokens-revamp-v1.css for the dual-world pack only.
   revamp-v1 pack and incoming/ stay untouched.

   What changed vs revamp-v1:
   - Surfaces darker and less blue (bg #09090b vs #0b0f19).
   - Text neutrals warm (derived from ART offwhite #fbfaf6), no pure white.
   - UI accent = warm lab amber #d4a574 (PROPOSED, ART gold family).
     #00f5d4 cyan is retired from UI for this lock.
   - --cf-gold / --cf-gold-light unchanged: logo and brand only.

   MOTION PAIR NOTE: pairs with drafts/2026-10-26-motion-kit/cefrite-motion.css
   (--cm-*). Kit is amber-synced; match:
     --cm-accent: #d4a574;
     --cm-ping-glow: rgba(212,165,116,0.14);
     --cm-accent-glow: rgba(196,150,81,0.12);
   This file holds no transitions, keyframes, glows or hover motion.
   Load order: this file, then page styles, then cefrite-motion.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;

  /* Color: surfaces (night lab, low blue) */
  --cf-bg: #09090b;              /* PROPOSED. Darker, near-neutral. Old #0b0f19 */
  --cf-bg-deep: #060608;         /* PROPOSED. Hero top, footer. Old #090d16 */
  --cf-navy: #0e1015;            /* PROPOSED. Desaturated ART navy #0f172a, blue cut. Raised bands, nav tile */
  --cf-surface: #17181c;         /* PROPOSED. Solid card / input fill. Old #1e293b */
  --cf-card: rgba(23, 24, 28, 0.6);
  --cf-nav-bg: rgba(6, 6, 8, 0.86);
  --cf-line: #1f1e1d;            /* PROPOSED. Warm hairline. Old #1e293b */
  --cf-line-strong: #34312d;     /* PROPOSED. Ghost buttons, inputs. Old #334155 */
  --cf-grid: #24221f;            /* PROPOSED. Warm dot grid. Old ART #28344e */
  --cf-offwhite: #fbfaf6;        /* ART. Inside artwork only */
  --cf-ink: #1e1e1e;             /* ART. Text on offwhite art only */

  /* Color: text (warm neutrals, no pure white glare) */
  --cf-text-strong: #f2ede4;     /* PROPOSED. H1/H2. ~17:1 on bg */
  --cf-text: #ddd6ca;            /* PROPOSED. Body. ~13.8:1 */
  --cf-text-soft: #c4bcae;       /* PROPOSED. Lead, secondary. ~10.6:1 */
  --cf-text-muted: #9c9486;      /* PROPOSED. Nav, labels. ~6.6:1 */
  --cf-text-micro: #8f887c;      /* PROPOSED. Disclaimer micro. ~5.7:1 */

  /* Color: single UI accent (warm lab amber) + brand gold (logo only) */
  --cf-accent: #d4a574;          /* PROPOSED. ~8.9:1 on bg. Replaces #00f5d4 */
  --cf-accent-soft: rgba(212, 165, 116, 0.08);  /* badge / tag fill, no bloom */
  --cf-accent-line: rgba(212, 165, 116, 0.28);  /* hover border, note rule */
  --cf-accent-dim: #a9845d;      /* PROPOSED. List markers, inactive numerals */
  --cf-on-accent: #09090b;       /* text on amber fill, ~8.9:1 */
  --cf-gold: #c49651;            /* ART GOLD. Logo / brand only */
  --cf-gold-light: #e4cf92;      /* ART GOLD_L. Logo / brand only */

  /* Type: families (unchanged) */
  --cf-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cf-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type: scale (revamp-v1 values kept) */
  --cf-fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --cf-fs-h1-inner: clamp(2rem, 1.5rem + 2vw, 2.75rem);   /* Science, Founder, Explainer H1 */
  --cf-fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  --cf-fs-h2-dense: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); /* Science section H2 */
  --cf-fs-h3: 1.125rem;
  --cf-fs-h3-lg: 1.5rem;
  --cf-fs-lead: 1.125rem;
  --cf-fs-lead-md: 1.25rem;
  --cf-fs-body: 1rem;
  --cf-fs-body-read: 1.0625rem;  /* long prose on Science / Founder / Explainer */
  --cf-fs-small: 0.875rem;
  --cf-fs-nav: 0.8125rem;
  --cf-fs-eyebrow: 0.75rem;
  --cf-fs-badge: 0.6875rem;
  --cf-fs-micro: 0.75rem;

  --cf-lh-h1: 1.08;
  --cf-lh-h2: 1.15;
  --cf-lh-h3: 1.3;
  --cf-lh-body: 1.65;
  --cf-lh-read: 1.75;
  --cf-lh-lead: 1.65;

  --cf-fw-light: 300;
  --cf-fw-body: 400;
  --cf-fw-ui: 600;
  --cf-fw-heading: 600;
  --cf-fw-h1: 600;               /* calmer at night; was 700 */

  --cf-ls-h1: -0.025em;
  --cf-ls-h2: -0.02em;
  --cf-ls-nav: 0.05em;
  --cf-ls-eyebrow: 0.18em;
  --cf-ls-badge: 0.1em;

  /* Spacing (4px unit, unchanged) */
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-6: 24px;
  --cf-space-8: 32px;
  --cf-space-10: 40px;
  --cf-space-12: 48px;
  --cf-space-16: 64px;
  --cf-space-20: 80px;
  --cf-space-24: 96px;
  --cf-space-28: 112px;
  --cf-space-32: 128px;

  /* Layout */
  --cf-container: 1280px;
  --cf-gutter: 20px;             /* <640px */
  --cf-gutter-md: 32px;          /* >=640px */
  --cf-measure: 56rem;           /* wide column: diagrams, media, card pairs */
  --cf-measure-lead: 42rem;      /* lead, disclaimer, Explainer prose */
  --cf-measure-read: 38rem;      /* dense prose on Science / Founder (~70ch) */
  --cf-section-y: 80px;
  --cf-section-y-dense: 56px;    /* Science section stack */
  --cf-hero-top: 80px;
  --cf-hero-bottom: 96px;
  --cf-hero-top-md: 112px;
  --cf-hero-bottom-md: 128px;
  --cf-grid-gap: 32px;
  --cf-grid-gap-dense: 24px;
  --cf-grid-cell: 64px;          /* dot / grid pattern */
  --cf-grid-opacity: 0.28;       /* lower than revamp-v1 (0.35) */

  /* Shape */
  --cf-radius: 0.75rem;
  --cf-radius-lg: 1rem;
  --cf-radius-pill: 9999px;
  --cf-border: 1px solid var(--cf-line);
  --cf-focus: 2px solid var(--cf-accent);
  --cf-focus-offset: 3px;
  --cf-nav-blur: 20px;
}
/* Breakpoints (literal values in media queries): 640px, 768px (nav collapse, 2/3 col), 1024px (Science side rail), 1280px. */

/* --------------------------------------------------------------------------
   Minimal starters only (body, container, measures). Page styles live in
   the pack's main.css. No motion here.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body);
  font-weight: var(--cf-fw-body);
  line-height: var(--cf-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(212, 165, 116, 0.28);
  color: var(--cf-text-strong);
}

.cf-container {
  width: 100%;
  max-width: var(--cf-container);
  margin-inline: auto;
  padding-inline: var(--cf-gutter);
}

@media (min-width: 640px) {
  .cf-container {
    padding-inline: var(--cf-gutter-md);
  }
}

.cf-measure {
  max-width: var(--cf-measure);
  margin-inline: auto;
}

.cf-measure--lead {
  max-width: var(--cf-measure-lead);
  margin-inline: auto;
}

.cf-measure--read {
  max-width: var(--cf-measure-read);
  margin-inline: auto;
}