/* GENERATED — DO NOT EDIT. Produced by scripts/fetch-template.mjs from
   Website Template 0.2.0 (cytognosis/branding@website-template-v0.2.0): tokens/colors.css, tokens/spacing.css, tokens/shadows.css
   concatenated, in that order. Pure :root custom-property files only —
   see landing/viz-panels.css for why tokens/base.css, tokens/fonts.css,
   and tokens/motion.css are deliberately excluded. Edit the Template
   upstream, never here. */
/* ─────────────────────────────────────────────────────────
   Cytognosis Color System, v11.2.1
   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
   ───────────────────────────────────────────────────────── */

: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, patient 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 */

  /* ════════════════════════════════
     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;
  --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;
}

/* ─────────────────────────────────────────────────────────
   Cytognosis Spacing, Layout & Radius Tokens, v11.2.1
   Base unit: 8px | Grid: 12-col, 24px gutter, 1280px max
   ───────────────────────────────────────────────────────── */

: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;

  /* ════════════════════════════════
     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 */
}

/* ─────────────────────────────────────────────────────────
   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 */
}