/* GENERATED, DO NOT EDIT. Produced by scripts/fetch-template.mjs from
   Website Template 1.0.0 (cytognosis/branding@website-template-v1.0.0). Edit the Template upstream. */
/* ─────────────────────────────────────────────────────────
   Cytognosis Website Template, tokens.css, v1.0.0
   Release-facing, flattened token bundle. This exact file,
   unmodified, is what the branding repo's website-template
   GitHub Release asset ships at the zip root, so that the
   website repo's scripts/fetch-template.mjs (which requires
   vendorDir/tokens.css to exist) can consume it.

   Concatenated, in the load order documented by template.css:
   colors, fonts, spacing, typography, motion, shadows, base,
   theme-dark, profiles. With this file loaded, add only
   template.css after it.

   Design system: Claude Design v11.3.1 (project 11d44c2c). The
   token files are byte-identical to v11.3.0 (v11.3.1 added the Yar
   mark and no tokens). theme-dark.css is the one package-owned
   file: it re-points existing ramp stops under [data-theme="dark"]
   and adds no color of its own.

   Generated by scripts/flatten_tokens.py. Do not hand-edit; edit
   the individual files under src/tokens/ (mirrored in tokens/),
   or profiles/profiles.css, and re-run the script.
   ───────────────────────────────────────────────────────── */


/* ═══════════ tokens/colors.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Color System, v11.3.0
   Every color derives from the emission wavelength of a
   fluorescent dye used in cellular biology.
   The palette is also therapeutic by design, cool primaries
   reduce cortisol and support calm focus.
   Identity triad: Azure → Violet → Indigo
   v11.3 adds the family aliases and the categorical order.
   ─────────────────────────────────────────────────────── */

:root {

  /* ════════════════════════════════
     IDENTITY TRIAD, Brand 600 values
     ══════════════════════════════ */

  /* Violet, DAPI ~461nm, DNA stain, cellular intelligence */
  --cg-violet:   #8B3FC7;   /* 600, MAIN BRAND COLOR */

  /* Azure, Alexa Fluor 488 ~488nm, AI precision, data */
  --cg-azure:    #3B7DD6;   /* 600, MAIN BLUE */

  /* Indigo, UV excitation ~358nm, scientific foundation */
  --cg-indigo:   #5145A8;   /* 600, MAIN INDIGO */

  /* ════════════════════════════════
     VIOLET, Full Scale
     ════════════════════════════════ */
  --cg-violet-950: #2E1147;
  --cg-violet-900: #4A1D6F;
  --cg-violet-800: #5E2589;
  --cg-violet-700: #7230A3;
  --cg-violet-600: #8B3FC7;  /* Primary brand */
  --cg-violet-500: #A05FD9;
  --cg-violet-400: #B580E6;
  --cg-violet-300: #CAA0F0;  /* ◆ Daily-use / therapeutic */
  --cg-violet-200: #DFC0F7;
  --cg-violet-100: #F0E0FB;
  --cg-violet-50:  #F8F0FD;

  /* ════════════════════════════════
     AZURE, Full Scale
     ════════════════════════════════ */
  --cg-azure-950: #071E3A;
  --cg-azure-900: #0D3B66;
  --cg-azure-800: #1A4D7F;
  --cg-azure-700: #2761A3;
  --cg-azure-600: #3B7DD6;   /* Main blue */
  --cg-azure-500: #5A95E8;
  --cg-azure-400: #7AAEF2;
  --cg-azure-300: #9BC5F7;   /* ◆ Daily-use / therapeutic */
  --cg-azure-200: #BCDCFB;
  --cg-azure-100: #DEF0FD;
  --cg-azure-50:  #EFF8FE;

  /* ════════════════════════════════
     INDIGO, Full Scale
     ════════════════════════════════ */
  --cg-indigo-950: #110F2E;
  --cg-indigo-900: #1E1B4B;
  --cg-indigo-800: #2D2766;
  --cg-indigo-700: #3D3485;
  --cg-indigo-600: #5145A8;  /* Main indigo */
  --cg-indigo-500: #6B5DC7;
  --cg-indigo-400: #8B7DD9;
  --cg-indigo-300: #ADA0E8;  /* ◆ Daily-use / therapeutic */
  --cg-indigo-200: #CFC5F3;
  --cg-indigo-100: #E8E3FA;
  --cg-indigo-50:  #F4F2FD;

  /* ════════════════════════════════
     TEAL, GFP ~509nm, balance, success
     ════════════════════════════════ */
  --cg-teal-900: #053838;
  --cg-teal-800: #0A5F5F;
  --cg-teal-700: #0D7C7C;
  --cg-teal-600: #14A3A3;   /* Main teal */
  --cg-teal-500: #1FC7C7;
  --cg-teal-400: #48D8D8;
  --cg-teal-300: #7FE8E8;   /* ◆ Daily-use */

  /* ════════════════════════════════
     CORAL, MitoTracker ~576nm
     Human warmth. NOT a brand color.
     Use: data viz, participant alerts only.
     ════════════════════════════════ */
  --cg-coral-800: #B23328;  /* AA-safe darker step, added for danger/error TEXT contrast fix (see SEMANTIC COLORS) */
  --cg-coral-700: #D94A3D;  /* large text / icons / borders / filled UI only, 3:1 floor; not AA-safe for small text (~4.2:1 on white) */
  --cg-coral-600: #F26355;  /* Main coral */
  --cg-coral-500: #FF7F6E;
  --cg-coral-400: #FFA090;
  --cg-coral-300: #FFBFB5;  /* ◆ Daily-use */

  /* ════════════════════════════════
     MAGENTA, Rhodamine ~565nm
     ⚠ Attention accent ONLY.
     Never in logos, brand gradients, or primary UI.
     ════════════════════════════════ */
  --cg-magenta-700: #C02380;
  --cg-magenta-600: #E0309E;  /* Main magenta */
  --cg-magenta-500: #ED5AB8;
  --cg-magenta-300: #F9A5DD;  /* ◆ Daily-use */

  /* ════════════════════════════════
     FAMILY ALIASES (v11.3)
     One name per family for generators, decks, and diagrams.
     Same role limits as the ramps above.
     ════════════════════════════════ */
  --cg-teal:     var(--cg-teal-600);
  --cg-coral:    var(--cg-coral-600);    /* data viz and participant alerts only */
  --cg-magenta:  var(--cg-magenta-600);  /* attention accent only */
  --cg-graphite: var(--cg-neutral-950);  /* #1A1A2E, the deck and diagram dark ink */

  /* ════════════════════════════════
     CATEGORICAL DATA-VIZ ORDER (v11.3)
     The one canonical order from references/12_dataviz.md.
     Pair with pattern overlays for print and color-blind contexts.
     ════════════════════════════════ */
  --cg-cat-1: var(--cg-violet-600);
  --cg-cat-2: var(--cg-azure-600);
  --cg-cat-3: var(--cg-teal-600);
  --cg-cat-4: var(--cg-magenta-600);
  --cg-cat-5: var(--cg-coral-600);
  --cg-cat-6: var(--cg-indigo-600);

  /* ════════════════════════════════
     THERAPEUTIC SOFT TOKENS (shade 300)
     For IDEs, dashboards, 8+ hr sessions
     ════════════════════════════════ */
  --cg-violet-soft:  #CAA0F0;
  --cg-azure-soft:   #9BC5F7;
  --cg-indigo-soft:  #ADA0E8;
  --cg-teal-soft:    #7FE8E8;
  --cg-coral-soft:   #FFBFB5;
  --cg-magenta-soft: #F9A5DD;

  /* ════════════════════════════════
     GRADIENTS (all 135°)
     ════════════════════════════════ */
  --cg-gradient-signature:  linear-gradient(135deg, #3B7DD6 0%, #8B3FC7 50%, #5145A8 100%); /* @kind other */
  --cg-gradient-innovation: linear-gradient(135deg, #14A3A3 0%, #3B7DD6 50%, #8B3FC7 100%); /* @kind other */
  --cg-gradient-vitality:   linear-gradient(135deg, #8B3FC7 0%, #F26355 50%, #B580E6 100%); /* @kind other */
  --cg-gradient-data:       linear-gradient(135deg, #3B7DD6 0%, #5145A8 50%, #6B5DC7 100%); /* @kind other */
  --cg-gradient-alert:      linear-gradient(135deg, #E0309E 0%, #F26355 100%);               /* @kind other */
  --cg-gradient-tech:       linear-gradient(135deg, #8B3FC7 0%, #5145A8 100%);                /* @kind other */ /* Violet -> Indigo, technology/platform content */
  --cg-gradient-health:     linear-gradient(135deg, #3B7DD6 0%, #14A3A3 100%);                 /* @kind other */ /* Azure -> Teal, human biology/health content */
  --cg-gradient-research:   linear-gradient(135deg, #5145A8 0%, #3B7DD6 100%);                 /* @kind other */ /* Indigo -> Azure, research/data content, inverse of health */

  /* ════════════════════════════════
     DARK NEUTRALS (indigo-tinted, hue ~240)
     Never pure black, reduces halation
     ════════════════════════════════ */
  --cg-abyss:       #0A0A14;   /* Absolute darkest */
  --cg-deep:        #13131F;   /* Sidebar, activity bar */
  --cg-neutral-950: #1A1A2E;   /* Graphite, deck and diagram ink (alias --cg-graphite) */
  --cg-neutral-900: #1E1E32;   /* ★ Rich Night, primary dark bg */
  --cg-neutral-800: #262640;   /* Bold Night, cards, panels */
  --cg-neutral-700: #303050;   /* Core Night, elevated surfaces */
  --cg-neutral-600: #3D3D5C;   /* Lite Night, borders */
  --cg-neutral-500: #50506E;   /* Mist Night, muted dividers */

  /* ════════════════════════════════
     LIGHT NEUTRALS (indigo-tinted)
     ════════════════════════════════ */
  --cg-day-400: #A8A8C0;
  --cg-day-300: #C4C4D8;
  --cg-day-200: #E0E0ED;
  --cg-day-100: #F0F0F7;   /* Pale Day */
  --cg-day-50:  #F8F8FC;   /* Ghost Day */

  /* ════════════════════════════════
     LANDING PAGE LIGHT PALETTE
     For public-facing off-white surfaces
     ════════════════════════════════ */
  --cg-lp-violet:       #6E5BD1;   /* Warmer, calmer violet for light mode */
  --cg-lp-violet-deep:  #3E3478;
  --cg-lp-lavender:     #A8B6FF;
  --cg-lp-sky:          #D7E9FF;
  --cg-lp-data:         #8FBDF5;
  --cg-lp-teal:         #63C9C6;
  --cg-lp-yellow:       #FFC845;   /* ⚠ Use as accent only, never dominant */
  --cg-lp-sage:         #A7C68A;

  --cg-lp-bg:           #F4F2EF;   /* Main warm off-white */
  --cg-lp-bg-soft:      #FAF8F2;
  --cg-lp-bg-section:   #ECE9E4;
  --cg-lp-surface:      #FFFFFF;
  --cg-lp-border:       #D8D4CC;
  --cg-lp-text:         #2E3036;
  --cg-lp-muted:        #6F7178;

  /* ════════════════════════════════
     SEMANTIC COLORS
     Remapped onto the brand ramp (one family, not generic hex/rainbow).
     See DESIGN-COLOR-SEMANTICS-AND-GRADIENTS.md §2 + §5.
     ════════════════════════════════ */
  --cg-success:      var(--cg-teal-700);   /* #0D7C7C, was generic #10B981; teal already brand-means "balance, success" */
  --cg-warning:      var(--cg-coral-600);  /* #F26355, was generic #F59E0B; large text/UI/icon use only (3:1 floor) -- always pair with icon or label, never used alone for small body text */
  --cg-danger:       var(--cg-coral-800);  /* #B23328, AA-safe darker coral step for danger/error TEXT, >=4.5:1 on all light surfaces */
  --cg-danger-large: var(--cg-coral-700);  /* #D94A3D, lighter coral retained for large text (>=18px/14px bold), icons, borders, filled UI (3:1 floor); do not use for small text */
  --cg-error:        var(--cg-danger);     /* alias, was generic #EF4444; kept so existing --cg-error references resolve to the AA-safe danger value */
  --cg-info:         #3B7DD6;   /* Azure 600, unchanged */

  /* ════════════════════════════════
     SEMANTIC SURFACE ALIASES
     Calm by default: the DEFAULT surface is warm paper. Dark is an explicit
     opt-in via [data-theme="dark"] (not the fallback). [data-theme="light"]
     is kept as an explicit alias of the default. Because --bg-* and the
     primary/muted --fg-* reference the --cg-lp-* family, they cascade to the
     dark values automatically when [data-theme="dark"] re-points --cg-lp-*.
     ════════════════════════════════ */
  --bg-1:     var(--cg-lp-bg);
  --bg-2:     var(--cg-lp-surface);
  --bg-3:     var(--cg-lp-bg-section);
  --bg-4:     var(--cg-lp-bg-soft);
  --border-1: rgba(81, 69, 168, 0.12);
  --border-2: rgba(81, 69, 168, 0.06);
  --fg-1:     var(--cg-lp-text);
  --fg-2:     #3E3F46;
  --fg-3:     var(--cg-lp-muted);
  --fg-4:     #9EA0A8;
}

/* ── Light theme, explicit alias of the warm default ── */
[data-theme="light"] {
  --bg-1:     var(--cg-lp-bg);
  --bg-2:     var(--cg-lp-surface);
  --bg-3:     var(--cg-lp-bg-section);
  --bg-4:     var(--cg-lp-bg-soft);
  --border-1: rgba(81, 69, 168, 0.12);
  --border-2: rgba(81, 69, 168, 0.06);
  --fg-1:     var(--cg-lp-text);
  --fg-2:     #3E3F46;
  --fg-3:     var(--cg-lp-muted);
  --fg-4:     #9EA0A8;
}

/* ── Dark theme, explicit opt-in (v11): Lumen dark landing values ── */
[data-theme="dark"] {
  /* surface + text aliases that don't auto-cascade from --cg-lp-* */
  --fg-2:     #C0C0D8;
  --fg-4:     #50507A;
  --border-1: rgba(139, 63, 199, 0.15);
  --border-2: rgba(139, 63, 199, 0.08);

  --cg-lp-violet:       #9B8AE8;   /* lifted for legibility on dark */
  --cg-lp-violet-deep:  #C4B8F5;
  --cg-lp-lavender:     #A8B6FF;
  --cg-lp-sky:          #D7E9FF;
  --cg-lp-data:         #8FBDF5;
  --cg-lp-teal:         #6FD5D2;   /* lifted */
  --cg-lp-yellow:       #FFC845;   /* accent only, never dominant */
  --cg-lp-sage:         #C0DCA2;   /* lifted */

  --cg-lp-bg:           #15131C;   /* Lumen dark main */
  --cg-lp-bg-soft:      #1B1924;
  --cg-lp-bg-section:   #221F2C;
  --cg-lp-surface:      #1E1B27;
  --cg-lp-border:       rgba(255, 255, 255, 0.10);
  --cg-lp-text:         #F2EFE9;
  --cg-lp-muted:        #B4AFC4;
}


/* ═══════════ tokens/fonts.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Fonts
   Source: Google Fonts CDN (all weights available at no cost)
   NOTE: For production, host locally to avoid CDN dependency.
   Flag: Inter, Newsreader, JetBrains Mono, Space Grotesk,
         Lexend, Atkinson Hyperlegible, all Google Fonts.
         Profile-specific: IBM Plex Sans, IBM Plex Mono,
         Source Serif Pro, Recursive (Research / Clinical / lab).
         If offline bundles are preferred, upload .ttf/.woff2
         files and replace these @imports with @font-face rules.
   ───────────────────────────────────────────────────────── */

/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */
/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */

:root {
  /* ── Primary roles ──
     v11.2.1: Space Grotesk is the canonical display/heading font
     (h1-h6, eyebrows), Inter is the canonical body font. This matches
     DESIGN-TOKENS-CANONICAL.css (website, v11.2.1, 2026-07-19), which
     restored Space Grotesk after an earlier Inter-only patch was
     reverted. Previously this file defaulted --font-display to Inter
     and buried Space Grotesk in an optional --font-heading-alt, which
     contradicted this project's own VERSION file (11.2.1). Fixed
     2026-07-25 to converge with canonical. */
  --font-display:      'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:         'Inter', system-ui, -apple-system, sans-serif;
  --font-accent:       'Newsreader', Georgia, 'Times New Roman', serif;
  --font-code:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Specialist / context-specific ── */
  --font-docs:         'Lexend', 'Inter', system-ui, sans-serif;
  --font-a11y:         'Atkinson Hyperlegible', 'Inter', system-ui, sans-serif;

  /* ── Profile-specific families (Research, Clinical, lab density) ── */
  --font-research:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-research-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-clinical-serif:'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-lab:           'Recursive', system-ui, ui-monospace, monospace;
}


/* ═══════════ tokens/spacing.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Spacing, Layout & Radius Tokens, v11.3.0
   Base unit: 8px | Grid: 12-col, 24px gutter, 1280px max
   v11.3 adds breakpoints, z-index, and the slide canvas.
   ───────────────────────────────────────────────────────── */

:root {
  /* ════════════════════════════════
     SPACING SCALE, 8px base
     ════════════════════════════════ */
  --space-xs:  4px;    /* icon padding, tight micro-spacing */
  --space-sm:  8px;    /* related elements, internal padding */
  --space-md:  16px;   /* default component spacing */
  --space-lg:  24px;   /* section inner padding */
  --space-xl:  32px;   /* major content breaks */
  --space-2xl: 48px;   /* section padding (mobile) */
  --space-3xl: 64px;   /* section padding (desktop) */
  --space-4xl: 80px;   /* section padding (large desktop) */
  --space-5xl: 120px;  /* hero sections */

  /* ════════════════════════════════
     BORDER RADIUS
     ════════════════════════════════ */
  --radius-sm:   4px;      /* small elements, tags */
  --radius-md:   8px;      /* buttons, inputs, chips */
  --radius-lg:   12px;     /* cards */
  --radius-xl:   16px;     /* modal, feature cards */
  --radius-2xl:  20px;     /* overlay panels */
  --radius-pill: 9999px;   /* badges, pill buttons */

  /* ════════════════════════════════
     LAYOUT
     ════════════════════════════════ */
  --grid-cols:        12; /* @kind other */
  --grid-gutter:      24px;
  --grid-max:         1280px;
  --grid-max-narrow:  960px;

  /* ════════════════════════════════
     BREAKPOINTS (v11.3), min-width, mobile first
     Use in media queries by value; custom properties do not
     resolve inside @media, so these are the documented numbers.
     ════════════════════════════════ */
  --bp-xs: 360px;   /* smallest tested width; no horizontal scroll */
  --bp-sm: 640px;
  --bp-md: 880px;   /* navigation collapses to the drawer below this */
  --bp-lg: 1024px;
  --bp-xl: 1280px;  /* equals --grid-max */

  /* ════════════════════════════════
     Z-INDEX (v11.3)
     ════════════════════════════════ */
  --z-base:    0;    /* @kind other */
  --z-raised:  10;   /* @kind other */ /* cards on hover, dropdowns */
  --z-sticky:  100;  /* @kind other */ /* sticky headers inside content */
  --z-nav:     200;  /* @kind other */ /* site navigation */
  --z-overlay: 500;  /* @kind other */ /* scrims, drawers */
  --z-modal:   600;  /* @kind other */
  --z-toast:   700;  /* @kind other */
  --z-crisis:  900;  /* @kind other */ /* CrisisBanner always on top */

  /* ════════════════════════════════
     TOUCH / ACCESSIBILITY
     ════════════════════════════════ */
  --touch-min: 44px;   /* minimum touch target (all interactive elements) */

  /* ════════════════════════════════
     NAVIGATION
     ════════════════════════════════ */
  --nav-height:          72px;  /* @kind other */
  --nav-height-compact:  60px;  /* @kind other */
  --sidebar-width:       240px; /* @kind other */

  /* ════════════════════════════════
     SLIDE CANVAS (v11.3), 16:9 at 1920x1080
     The pptx mirror is 13.333in by 7.5in (1pt = 2px at this scale).
     ════════════════════════════════ */
  --slide-w:           1920px;
  --slide-h:           1080px;
  --slide-pad-x:       96px;    /* left and right margin (0.667in on the 13.333in pptx canvas) */
  --slide-pad-top:     96px;    /* eyebrow sits here; the title follows */
  --slide-pad-bottom:  120px;   /* the footer (source line, logo, number) lives inside this band, 48px from the bottom */
  --slide-gap:         24px;    /* gap between cards */
  --slide-card-radius: 20px;
}


/* ═══════════ tokens/typography.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Typography Tokens, v11.3.0
   Type scale: Major Third (ratio 1.250×), base 16px
   Hard rules: body ≥16px, line-length 50–75ch, left-align only
   Mobile: the clamp() scale below is fluid and safe at 320px, every
   heading resolves to its rem minimum (vw term never drops it lower),
   and body stays at the fixed 16px floor. No separate mobile ramp needed.
   v11.3 adds the slide type scale (24px floor on slides).
   ───────────────────────────────────────────────────────── */

:root {
  /* ════════════════════════════════
     TYPE SCALE, Major Third (1.25×)
     ════════════════════════════════ */
  --text-display: clamp(3rem, 5vw, 3.8125rem);        /* ~61px */
  --text-h1:      clamp(2.25rem, 3.75vw, 3rem);       /* ~48px */
  --text-h2:      clamp(1.875rem, 2.75vw, 2.4375rem); /* ~39px */
  --text-h3:      clamp(1.5rem, 2.25vw, 1.9375rem);   /* ~31px */
  --text-h4:      clamp(1.375rem, 1.75vw, 1.5625rem);  /* ~22-25px, floor stays above h5 */
  --text-h5:      1.25rem;    /* 20px */
  --text-h6:      1rem;       /* 16px */

  --text-body-lg: 1.125rem;  /* 18px, hero subheadlines */
  --text-body:    1rem;      /* 16px, default (never below this) */
  --text-body-sm: 0.875rem;  /* 14px, secondary copy */
  --text-caption: 0.75rem;   /* 12px, captions, footnotes */
  --text-code:    0.875rem;  /* 14px, JetBrains Mono */
  --text-label:   0.6875rem; /* 11px, uppercase mono metadata labels */
  --text-micro:   0.625rem;  /* 10px, absolute minimum, sparingly */

  /* ════════════════════════════════
     SLIDE TYPE SCALE (v11.3), px at a 1920x1080 canvas
     Nothing on a slide is smaller than --slide-text-small (24px).
     pptx mirror at 13.333in: divide by 2 for points (72px = 36pt).
     ════════════════════════════════ */
  --slide-text-stat:    88px;  /* big numbers on stat tiles */
  --slide-text-title:   64px;  /* slide title, Space Grotesk 700 (32pt) */
  --slide-text-title-long: 56px; /* titles over about 100 characters (28pt) */
  --slide-text-h3:      32px;  /* card headings */
  --slide-text-eyebrow: 24px;  /* uppercase eyebrow, 3px tracking */
  --slide-text-body:    26px;  /* card body, bullets */
  --slide-text-small:   24px;  /* floor: footers, table cells, captions */
  --slide-text-source:  24px;  /* source line, muted */

  /* ════════════════════════════════
     LINE HEIGHTS
     ════════════════════════════════ */
  --lh-display: 1.05; /* @kind other */
  --lh-h1:      1.1;  /* @kind other */
  --lh-h2:      1.2;  /* @kind other */
  --lh-h3:      1.3;  /* @kind other */
  --lh-h4:      1.4;  /* @kind other */
  --lh-h5:      1.4;  /* @kind other */
  --lh-body:    1.6;  /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */
  --lh-tight:   1.25; /* @kind other */
  --lh-code:    1.5;  /* @kind other */

  /* ════════════════════════════════
     LETTER SPACING
     ════════════════════════════════ */
  --ls-display:  -0.03em; /* @kind other */
  --ls-h1:       -0.02em; /* @kind other */
  --ls-h2:       -0.015em; /* @kind other */
  --ls-h3:       -0.01em; /* @kind other */
  --ls-h4:       -0.01em; /* @kind other */
  --ls-h5:       -0.005em; /* @kind other */
  --ls-body:     0; /* @kind other */
  --ls-label:    0.08em; /* @kind other */
  --ls-caps:     0.12em; /* @kind other */
  --ls-mono:     0;  /* @kind other */

  /* ════════════════════════════════
     FONT WEIGHTS
     ════════════════════════════════ */
  --fw-light:    300; /* @kind other */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  /* ════════════════════════════════
     MAX LINE LENGTH
     ════════════════════════════════ */
  --measure-narrow: 45ch; /* @kind other */
  --measure:        68ch; /* @kind other */  /* body line-length cap (~68 chars) */
  --measure-wide:   80ch; /* @kind other */
}


/* ═══════════ tokens/motion.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Motion Tokens, v11.2.1
   Principle: motion serves function. Restraint is the default.
   Animate only transform and opacity, never layout properties.
   prefers-reduced-motion: reduce is REQUIRED, not optional.
   ───────────────────────────────────────────────────────── */

:root {
  /* ════════════════════════════════
     DURATION
     ════════════════════════════════ */
  --dur-fast:   150ms;   /* @kind other */
  --dur-base:   250ms;   /* @kind other */
  --dur-slow:   350ms;   /* @kind other */
  --dur-slower: 500ms;   /* @kind other */
  --dur-xl:     800ms;   /* @kind other */  /* orchestration, dramatic reveals */
  --dur-pulse:  1500ms;  /* @kind other */

  /* ════════════════════════════════
     EASING
     ════════════════════════════════ */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-linear: linear;                           /* @kind other */

  /* ════════════════════════════════
     PERMITTED TRANSFORMS
     ════════════════════════════════ */
  --hover-lift:    translateY(-2px); /* @kind other */
  --hover-lift-sm: translateY(-1px); /* @kind other */
  --press-down:    scale(0.98);      /* @kind other */
}

/* ════════════════════════════════
   REDUCED MOTION, REQUIRED
   This is not optional. It is a core accessibility commitment.
   ════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════ tokens/shadows.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Shadow & Glow Tokens, v11.2.1
   All shadow colors use rgba(26,26,46,…), indigo-tinted dark.
   Never rgba(0,0,0,…), avoids harsh contrast artifacts.
   ───────────────────────────────────────────────────────── */

:root {
  /* ════════════════════════════════
     ELEVATION SHADOWS
     ════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.05);
  --shadow-md: 0 4px 6px rgba(26, 26, 46, 0.10);
  --shadow-lg: 0 10px 15px rgba(26, 26, 46, 0.15);
  --shadow-xl: 0 20px 25px rgba(26, 26, 46, 0.20);
  --shadow-2xl: 0 40px 60px rgba(26, 26, 46, 0.25);

  /* ════════════════════════════════
     BRAND GLOWS
     For interactive state emphasis and heroic moments
     ════════════════════════════════ */
  --shadow-glow-violet:  0 0 40px rgba(139, 63, 199, 0.30);
  --shadow-glow-azure:   0 0 40px rgba(59, 125, 214, 0.30);
  --shadow-glow-indigo:  0 0 40px rgba(81, 69, 168, 0.30);
  --shadow-glow-teal:    0 0 40px rgba(20, 163, 163, 0.25);
  --shadow-glow-magenta: 0 0 40px rgba(224, 48, 158, 0.20);

  /* Tight glows, for button hover states */
  --shadow-glow-violet-sm: 0 0 16px rgba(139, 63, 199, 0.45);
  --shadow-glow-azure-sm:  0 0 16px rgba(59, 125, 214, 0.45);

  /* ════════════════════════════════
     GLASSMORPHISM
     Reserved: nav bar, modals, feature cards on dark hero.
     Never stack glass on glass.
     ════════════════════════════════ */
  --glass-bg:      rgba(30, 30, 50, 0.40);   /* @kind other */
  --glass-bg-lt:   rgba(255, 255, 255, 0.55); /* @kind other */
  --glass-border:  rgba(255, 255, 255, 0.08); /* @kind other */
  --glass-blur:    blur(14px);                /* @kind other */
  --glass-blur-sm: blur(8px);                 /* @kind other */

  /* ════════════════════════════════
     INSET / INNER
     For input fields, pressed states
     ════════════════════════════════ */
  --shadow-inset: inset 0 1px 3px rgba(26, 26, 46, 0.12); /* @kind shadow */
}


/* ═══════════ tokens/base.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Base Styles, v11.2.1
   Resets, global defaults, and accessibility primitives.
   ───────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: var(--text-body, 1rem);
  line-height: var(--lh-body, 1.6);
  color: var(--fg-1, #2E3036);
  background-color: var(--bg-1, #F4F2EF);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-align: left;
}

/* ── Typography defaults ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-h3, 1.3);
  letter-spacing: var(--ls-h3, -0.01em);
  font-weight: var(--fw-bold, 700);
  color: var(--fg-1);
  text-wrap: pretty;
}

p {
  max-width: var(--measure, 68ch);
  text-wrap: pretty;
}

/* Body links carry a non-color cue (underline) in reading copy. */
p a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

code, kbd, samp, pre {
  font-family: var(--font-code);
  font-size: var(--text-code);
}

/* ── Links ──
   Default surface is warm paper, so the default link resolves to a dark violet
   that clears AAA on light (violet-700 #7230A3 = 7.05:1 on #F4F2EF). Dark
   surfaces opt in via [data-theme="dark"] and get the light 300-shade links. */
a {
  color: var(--cg-violet-700, #7230A3);
  text-decoration: none;
  transition: color var(--dur-fast, 150ms) var(--ease-out);
}

a:hover {
  color: var(--cg-violet-900, #4A1D6F);
}

[data-theme="dark"] a {
  color: var(--cg-azure-300, #9BC5F7);
}

[data-theme="dark"] a:hover {
  color: var(--cg-violet-300, #CAA0F0);
}

/* ── Focus ring, one system-wide implementation ──
   Canonical 3px Azure-300 ring at 0.85 alpha (per brand guide). Defined here in
   the global :root so every component (not only profile-scoped surfaces) shares
   the exact same ring; profiles/states.css re-uses the same values. */
:root {
  --focus-ring: 0 0 0 3px rgba(155, 197, 247, 0.85); /* @kind shadow */
  --focus-ring-offset: 2px; /* @kind spacing */
  --focus-ring-inset: inset 0 0 0 2px rgba(155, 197, 247, 0.85); /* @kind shadow */
}

/* ── Focus, visible always, never hidden ── */
:focus-visible {
  outline: 3px solid var(--cg-azure-300, #9BC5F7);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-sm, 4px);
}

/* ── High-contrast mode ──
   Activates on any surface that loads styles.css (does not require a
   [data-profile] scope). The profile-scoped layer in profiles/a11y.css
   adds the same treatment inside profile surfaces. */
@media (prefers-contrast: more) {
  :root {
    --border-1: currentColor;
    --border-2: currentColor;
    --fg-3: var(--fg-2);
    --fg-4: var(--fg-3);
  }
  a { text-decoration: underline; }
  :focus-visible { outline-width: 4px; }
}

/* ── Skip-to-content link (accessible, visible on focus) ── */
.skip-link {
  position: absolute;
  left: var(--space-sm, 8px);
  top: -60px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min, 44px);
  padding: var(--space-sm, 8px) var(--space-md, 16px);
  background: var(--cg-violet, #8B3FC7);
  color: var(--cg-day-50, #fff);
  border-radius: var(--radius-sm, 4px);
  transition: top var(--dur-fast, 150ms) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm, 8px); }

/* ── Density modes ──
   Default (comfortable) holds the 16px reading floor. data-density="compact"
   is an explicit opt-in for dense internal tooling (dashboards, workbench):
   it tightens line-height and interior spacing, but never lowers the 16px
   body floor or the 44px touch-min. */
[data-density="compact"] {
  --lh-body: 1.5; /* @kind other */
  --space-md: 12px;
  --space-lg: 18px;
}

/* ── Images & media ── */
img, video, svg {
  max-width: 100%;
  display: block;
}

/* ── Lists ── */
ul, ol {
  list-style: none;
}

/* ── Buttons ── */
button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* Interactive hit-target floor (WCAG 2.5.8). Applies to explicit buttons
   and role=button; icon-only controls opt out with .btn-icon. */
button:not(.btn-icon),
[role="button"]:not(.btn-icon) {
  min-height: var(--touch-min, 44px);
}

/* ── Form elements ── */
input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--fg-1);
}

/* ── Misc ── */
hr {
  border: none;
  border-top: 1px solid var(--border-1, rgba(139, 63, 199, 0.15));
}

/* ── Utility: gradient text ── */
.cg-text-gradient {
  background: var(--cg-gradient-signature);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Utility: visually hidden (accessible) ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}


/* ═══════════ tokens/theme-dark.css ═══════════ */

/* ─────────────────────────────────────────────────────────
   Cytognosis Website Template, Dark Theme, v1.0.0
   Package-owned overlay (the one file in tokens/ that is not a
   design-system export). It adds no color of its own: every value
   below is an existing --cg-* ramp stop, re-pointed under
   [data-theme="dark"] so a page, or any region of a page, can go
   dark by setting one attribute.

   Load order: after tokens/base.css, before profiles/profiles.css
   and template.css. Light is the default and needs no file.

   Surfaces:  ink --cg-neutral-950, band --cg-deep, soft --cg-neutral-900,
              card --cg-neutral-800, hairlines --cg-neutral-600/700.
   Text:      --cg-day-50 / 200 / 400 (all AA on every surface above).
   Accents:   the 300 shades, through the profile's --accent-on-dark.

   Supported nesting: a dark region inside a light page (a hero, a
   band, the footer). The reverse (a light region inside a dark page)
   is not supported, because the design system's light landing values
   live only on :root.
   ───────────────────────────────────────────────────────── */

[data-theme="dark"] {
  color-scheme: dark;

  /* ── design-system landing-page surfaces, re-pointed to ramp stops ──
     colors.css re-points these to hand-picked dark values; the template
     stays on the ramp so dark pages match the deck and the Yar mark. */
  --cg-lp-bg:         var(--cg-neutral-950);
  --cg-lp-bg-soft:    var(--cg-neutral-900);
  --cg-lp-bg-section: var(--cg-deep);
  --cg-lp-surface:    var(--cg-neutral-800);
  --cg-lp-border:     var(--cg-neutral-600);
  --cg-lp-text:       var(--cg-day-50);
  --cg-lp-muted:      var(--cg-day-400);

  /* ── design-system semantic aliases, set directly so that a nested
     dark region recomputes them (custom properties defined on :root
     are not re-resolved below it). ── */
  --bg-1: var(--cg-neutral-950);
  --bg-2: var(--cg-neutral-800);
  --bg-3: var(--cg-deep);
  --bg-4: var(--cg-neutral-900);
  --border-1: var(--cg-neutral-600);
  --border-2: var(--cg-neutral-700);
  --fg-1: var(--cg-day-50);
  --fg-2: var(--cg-day-200);
  --fg-3: var(--cg-day-400);
  --fg-4: var(--cg-neutral-500);

  /* ── template semantic aliases (what template.css reads) ── */
  --tpl-bg:         var(--cg-neutral-950);  /* page surface: ink */
  --tpl-bg-soft:    var(--cg-neutral-900);
  --tpl-bg-section: var(--cg-deep);         /* banded section: one step darker */
  --tpl-surface:    var(--cg-neutral-800);  /* raised surface */
  --tpl-card:       var(--cg-neutral-800);  /* card fill */
  --tpl-tint:       var(--cg-indigo-900);   /* emphasis-tinted fill */
  --tpl-border:     var(--cg-neutral-600);  /* hairline */
  --tpl-border-soft:var(--cg-neutral-700);
  --tpl-text:       var(--cg-day-50);
  --tpl-text-2:     var(--cg-day-200);
  --tpl-muted:      var(--cg-day-400);
  --tpl-emphasis:   var(--accent-on-dark, var(--cg-violet-300));
  --tpl-emph-soft:  var(--accent-on-dark, var(--cg-violet-300));
  --tpl-on-emphasis:var(--cg-neutral-950);  /* text on a filled emphasis control */
  --tpl-focus:      var(--cg-azure-300);
  --tpl-ok:         var(--cg-teal-300);
  --tpl-info:       var(--cg-azure-300);
  --tpl-partial:    var(--cg-indigo-300);
  --tpl-attention:  var(--cg-coral-300);
  --tpl-field-border: var(--cg-day-400);    /* form control boundary, 3:1 on card and ink */
  /* 300 shades of azure and the profile's own accent, ink text on top */
  --tpl-cta-gradient: linear-gradient(135deg, var(--cg-azure-300) 0%, var(--accent-on-dark, var(--cg-violet-300)) 100%);
}


/* ═══════════ profiles/profiles.css ═══════════ */

/* Profile settlement pass complete, 2026-08-01. */
/* Cytognosis profile system, v11.2.1
   Three surface profiles, each with a type stack + palette emphasis + copy voice.
   Research additionally carries a lab density ([data-density="lab"]) for CLI,
   editor, and log surfaces (Recursive, monospace-forward, higher density).
   Every profile scopes under [data-profile="<name>"] so you can mix them on one page. */

/* ─── type stack imports ──────────────────────────────────────────── */
/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */
/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */
/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */
/* remote font @import removed: fonts are self-hosted, see assets/fonts/fonts.css */

/* ─── base tokens (shared across all profiles) ───────────────────── */
.profile-scope {
  --cg-azure: var(--pf-base-azure);
  --cg-violet: var(--pf-base-violet);
  --cg-indigo: var(--pf-base-indigo);
  --cg-teal: var(--cg-teal-600);
  --cg-coral: var(--cg-coral-600);
  --cg-magenta: var(--cg-magenta-600);

  --cg-azure-300: var(--pf-base-azure-300);
  --cg-violet-300: var(--pf-base-violet-300);
  --cg-indigo-300: var(--pf-base-indigo-300);
  --cg-teal-300: var(--pf-base-teal-300);

  --cg-ink-deep: var(--cg-abyss);
  --cg-ink-1: var(--cg-deep);
  --cg-ink-2: var(--pf-base-ink-2);
  --cg-ink-3: var(--cg-neutral-800);
  --cg-day: var(--pf-base-day);
  --cg-day-2: var(--pf-base-day-2);

  font-family: var(--f-body);
  color-scheme: dark;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

.profile-scope * { box-sizing: border-box; }
.profile-scope .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.profile-scope .code    { font-family: var(--f-code); }
.profile-scope .q       { font-family: var(--f-accent); font-style: italic; }

/* ─── Foundation ─ public, editorial, marketing ─────────────────── */
/* Display Space Grotesk, body Inter, accent Newsreader, code JetBrains Mono.
   Gradient-forward. Keeps the signature triad (azure, violet, indigo) legible
   at poster scale. Display matches the canonical --font-display in
   tokens/fonts.css; Foundation is the brand-facing profile, so it inherits the
   canonical display face rather than overriding it to Inter. */
.profile-scope[data-profile="foundation"],
[data-profile="foundation"] .profile-scope,
[data-profile="foundation"] {
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* @kind font */
  --f-body:    "Inter", system-ui, sans-serif; /* @kind font */
  --f-accent:  "Newsreader", "Source Serif Pro", Georgia, serif; /* @kind font */
  --f-code:    "JetBrains Mono", ui-monospace, monospace; /* @kind font */

  --emphasis: var(--cg-violet);
  --surface:  var(--cg-ink-1);
  --surface-2: var(--cg-ink-2);
  --accent-on-dark: var(--cg-violet-300);
}

/* ─── Clinical ─ patient-facing, therapeutic ────────────────────── */
/* Inter for legibility, Source Serif Pro for short quotations, JetBrains Mono
   for tabulated vitals. Heavier on warm off-whites, muted 300-shade accents. */
.profile-scope[data-profile="clinical"],
[data-profile="clinical"] .profile-scope,
[data-profile="clinical"] {
  --f-display: "Inter", system-ui, sans-serif; /* @kind font */
  --f-body:    "Inter", system-ui, sans-serif; /* @kind font */
  --f-accent:  "Source Serif Pro", Georgia, serif; /* @kind font */
  --f-code:    "JetBrains Mono", ui-monospace, monospace; /* @kind font */

  --emphasis: var(--cg-violet);
  --surface: var(--pf-clinical-surface);
  --surface-2: var(--cg-lp-surface);
  --accent-on-dark: var(--cg-violet-300);

  color: var(--cg-neutral-900);
}
[data-profile="clinical"] .q {
  color: var(--cg-violet-800);
  font-family: "Source Serif Pro", Georgia, serif;
}

/* ─── Research ─ scientist workbench, dense data ────────────────── */
/* IBM Plex Sans + Plex Mono across the board, sans and mono share metrics,
   tables and prose line up without jitter. Indigo emphasis, magenta alerts. */
.profile-scope[data-profile="research"],
[data-profile="research"] .profile-scope,
[data-profile="research"] {
  --f-display: "IBM Plex Sans", system-ui, sans-serif; /* @kind font */
  --f-body:    "IBM Plex Sans", system-ui, sans-serif; /* @kind font */
  --f-accent:  "IBM Plex Sans", system-ui, sans-serif; /* @kind font */
  --f-code:    "IBM Plex Mono", ui-monospace, monospace; /* @kind font */

  --emphasis: var(--cg-indigo);
  --surface:  var(--cg-ink-1);
  --surface-2: var(--cg-ink-2);
  --accent-on-dark: var(--cg-indigo-300);

  font-variation-settings: "wght" 400;
}

/* ─── Research · lab density ─ developer / CLI, one-family ───────── */
/* Folded from the former Lab profile; activated by [data-density="lab"] on a
   Research scope. Recursive across sans + mono, with its CASL + MONO axes. Prose
   and code are the same family, tuned by axis rather than font swap. */
.profile-scope[data-profile="research"][data-density="lab"],
[data-profile="research"][data-density="lab"] .profile-scope,
[data-profile="research"][data-density="lab"] {
  --f-display: "Recursive", system-ui, sans-serif; /* @kind font */
  --f-body:    "Recursive", system-ui, sans-serif; /* @kind font */
  --f-accent:  "Recursive", system-ui, sans-serif; /* @kind font */
  --f-code:    "Recursive", ui-monospace, monospace; /* @kind font */

  --emphasis: var(--cg-violet-300);
  --surface: var(--cg-neutral-950);
  --surface-2: var(--cg-deep);
  --accent-on-dark: var(--cg-violet-300);

  font-variation-settings: "CASL" 0.25, "MONO" 0, "slnt" 0, "wght" 430;
}
[data-profile="research"][data-density="lab"] .code {
  font-variation-settings: "CASL" 0, "MONO" 1, "slnt" 0;
}
[data-profile="research"][data-density="lab"] .q {
  font-variation-settings: "CASL" 0.9, "MONO" 0, "slnt" -8;
  font-style: normal;
}

/* ─── keyframes ─────────────────────────────────────────────────── */
@keyframes blink { 50% { opacity: 0; } }


/* v11.2.1: --pf-* tokens settled to canonical ramp steps in tokens/colors.css. Settlement pass complete, 2026-08-01. */
.profile-scope {
  --pf-base-azure: var(--cg-azure);
  --pf-base-violet: var(--cg-violet);
  --pf-base-indigo: var(--cg-indigo);
  --pf-base-azure-300: var(--cg-azure-300);
  --pf-base-violet-300: var(--cg-violet-300);
  --pf-base-indigo-300: var(--cg-indigo-300);
  --pf-base-teal-300: var(--cg-teal-300);
  --pf-base-ink-2: var(--cg-neutral-950); /* nearest ramp step to former custom #1C1C2E */
  --pf-base-day: var(--cg-day-100); /* paired with day-2 to keep two distinct light steps, both nearest the former custom pair */
  --pf-base-day-2: var(--cg-day-50);
}
[data-profile="clinical"] {
  --pf-clinical-surface: var(--cg-lp-bg-soft);
}

/* ── Profile example palette (v11.2.1): settled to canonical ramp steps. Settlement pass complete, 2026-08-01. ── */
[data-profile="foundation"] {
  --pf-foundation-text-secondary: var(--cg-day-300);
  --pf-foundation-surface-veil: var(--cg-day-100);
}
[data-profile="clinical"] {
  --pf-clinical-bg: var(--cg-lp-bg);
  --pf-clinical-hairline: var(--cg-lp-border);
  --pf-clinical-text-muted: var(--cg-neutral-500); /* nudged for AA: former custom shade failed 4.5:1 on bg-sunken; neutral-500 passes 6.4:1+ on all three clinical surfaces */
  --pf-clinical-text-secondary: #4A4A66; /* custom AA-tuned neutral, no ramp match; AAA body: 7.6:1 on warm paper, 8.0:1 on raised */
  --pf-clinical-bg-raised: var(--cg-lp-bg-soft);
  --pf-clinical-warn-surface: #FFF4F1; /* light coral tint, no direct ramp equivalent */
  --pf-clinical-alert-surface: #FFDFD9; /* mid coral tint, no direct ramp equivalent */
}
[data-profile="research"] {
  --pf-research-text-muted: var(--cg-indigo-400); /* stays in research's indigo hue family, one step darker/more saturated than text-secondary (indigo-300) */
  --pf-research-hairline: var(--cg-indigo-100);
  --pf-research-border: var(--cg-neutral-800);
  --pf-research-bg-sunken: var(--cg-abyss); /* settled: was conflicting with states.css (#1C1C2E vs #0B0B16); abyss = one step darker than bg-base per rule */
  --pf-research-warn: var(--cg-coral-400);
}
[data-profile="research"][data-density="lab"] {
  --pf-lab-hairline: var(--cg-indigo-100);
  --pf-lab-warn: var(--cg-coral-400);
  --pf-lab-text-muted: var(--cg-indigo-400);
  --pf-lab-bg: var(--cg-neutral-950);
  --pf-lab-panel: var(--cg-neutral-800); /* colors.css names this step "Bold Night, cards, panels" */
  --pf-lab-bg-sunken: var(--cg-abyss); /* settled: was conflicting with states.css (#1c1c34 vs #0E0E1A) */
  --pf-lab-line: var(--cg-neutral-500); /* colors.css names this step "Mist Night, muted dividers" */
}
/* Canvas/meta tokens: back the Claude Design exploration canvas chrome (paper, highlighter, annotation pen),
   not a Cytognosis brand profile. Intentionally left outside the --cg-* ramp. */
:root {
  --pf-canvas-paper: #f0eee9;
  --pf-canvas-highlight: #fef4a8;
  --pf-canvas-highlight-ink: #5a4a2a;
  --pf-canvas-accent: #c96442;
  --pf-canvas-ink: #2a251f;
  --pf-canvas-line: #bbb;
}

/* ─── Domain accent-swap layer ─────────────────────────────────────
   [data-domain] layers OVER [data-profile]: content type drives the
   accent, independent of which profile (voice/type register) a page
   uses. Touches ONLY --emphasis, --accent-on-dark, --accent-gradient;
   never --surface, --bg-*, --fg-*, or body text, so AA guarantees hold
   per accent pairing without re-verification per domain.
   Four domains: health, tech, research, community. A fifth state,
   "informational" (no [data-domain] set), is intentionally the
   no-override fallback: it inherits the active profile's own
   --emphasis (violet by default) rather than adding a fifth rule.
   See DESIGN-COLOR-SEMANTICS-AND-GRADIENTS.md §2 (domain-accent-swap
   mechanism) and §3 (gradient tokens referenced below). ─── */
[data-domain="health"] {
  --emphasis: var(--cg-azure);
  --accent-on-dark: var(--cg-azure-300);
  --accent-gradient: var(--cg-gradient-health);
}
[data-domain="tech"] {
  --emphasis: var(--cg-violet);
  --accent-on-dark: var(--cg-violet-300);
  --accent-gradient: var(--cg-gradient-tech);
}
[data-domain="research"] {
  --emphasis: var(--cg-indigo);
  --accent-on-dark: var(--cg-indigo-300);
  --accent-gradient: var(--cg-gradient-research);
}
[data-domain="community"] {
  --emphasis: var(--cg-coral-600);
  --accent-on-dark: var(--cg-coral-300);
  --accent-gradient: var(--cg-gradient-vitality); /* reused, not a new token: violet -> coral -> violet-400, "warmth" already matches Community */
}