/* Cytognosis Foundation — Brand Variables v10.0
   Canonical CSS tokens aligned with Design System v1.0.0
   Source: design/colors_and_type.css (Claude Design export)
   Updated: May 2026 */

/* ===== FONTS =====
   Primary:       Inter (UI, headings, body)
   Accent:        Newsreader (quotes, emphasis)
   Code:          JetBrains Mono
   Accessibility: Lexend, Atkinson Hyperlegible
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,600&family=Lexend:wght@400;500;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap');

:root {
  /* ======================================================
     COLOR — Base palette (fluorophore-derived)
     Every shade = primary scientific source of truth
     ====================================================== */

  /* AZURE — "The Patient"  (Alexa Fluor 488 ~488nm) */
  --cg-azure-50:  #EFF8FE;
  --cg-azure-100: #DEF0FD;
  --cg-azure-200: #BCDCFB;
  --cg-azure-300: #9BC5F7;  /* daily-use token */
  --cg-azure-400: #7AAEF2;
  --cg-azure-500: #5A95E8;
  --cg-azure-600: #3B7DD6;  /* MAIN */
  --cg-azure-700: #2761A3;
  --cg-azure-800: #1A4D7F;
  --cg-azure-900: #0D3B66;
  --cg-azure-950: #071E3A;

  /* VIOLET — "The Progression"  (DAPI ~461nm) */
  --cg-violet-50:  #F8F0FD;
  --cg-violet-100: #F0E0FB;
  --cg-violet-200: #DFC0F7;
  --cg-violet-300: #CAA0F0;  /* daily-use token */
  --cg-violet-400: #B580E6;
  --cg-violet-500: #A05FD9;
  --cg-violet-600: #8B3FC7;  /* MAIN BRAND */
  --cg-violet-700: #7230A3;
  --cg-violet-800: #5E2589;
  --cg-violet-900: #4A1D6F;
  --cg-violet-950: #2E1147;

  /* INDIGO — "The Pioneer"  (UV excitation ~358nm) */
  --cg-indigo-50:  #F4F2FD;
  --cg-indigo-100: #E8E3FA;
  --cg-indigo-200: #CFC5F3;
  --cg-indigo-300: #ADA0E8;  /* daily-use token */
  --cg-indigo-400: #8B7DD9;
  --cg-indigo-500: #6B5DC7;
  --cg-indigo-600: #5145A8;  /* MAIN */
  --cg-indigo-700: #3D3485;
  --cg-indigo-800: #2D2766;
  --cg-indigo-900: #1E1B4B;
  --cg-indigo-950: #110F2E;

  /* CORAL — functional data primary  (MitoTracker ~576nm) */
  --cg-coral-50:  #FFF8F7;
  --cg-coral-100: #FFF0ED;
  --cg-coral-200: #FFDFD9;
  --cg-coral-300: #FFBFB5;
  --cg-coral-400: #FF9F91;
  --cg-coral-500: #FF7F6E;
  --cg-coral-600: #F26355;  /* MAIN */
  --cg-coral-700: #D94A3D;
  --cg-coral-800: #A83425;
  --cg-coral-900: #7A2018;

  /* TEAL — biological harmony  (GFP ~509nm) */
  --cg-teal-50:  #ECFDFD;
  --cg-teal-100: #D9FAFA;
  --cg-teal-200: #B3F3F3;
  --cg-teal-300: #7FE8E8;
  --cg-teal-400: #4DD9D9;
  --cg-teal-500: #1FC7C7;
  --cg-teal-600: #14A3A3;  /* MAIN */
  --cg-teal-700: #0D7C7C;
  --cg-teal-800: #0A5F5F;
  --cg-teal-900: #053838;

  /* MAGENTA — strict attention accent  (Rhodamine ~565nm) */
  --cg-magenta-50:  #FFF3FC;
  --cg-magenta-100: #FEE6F7;
  --cg-magenta-200: #FCC9EC;
  --cg-magenta-300: #F9A5DD;
  --cg-magenta-400: #F47FCC;
  --cg-magenta-500: #ED5AB8;
  --cg-magenta-600: #E0309E;  /* MAIN — alerts only */
  --cg-magenta-700: #C02380;
  --cg-magenta-800: #9C1A66;
  --cg-magenta-900: #7A1450;
  --cg-magenta-950: #4D0A32;

  /* === Shorthand aliases (backward compat) === */
  --cg-violet:  var(--cg-violet-600);
  --cg-azure:   var(--cg-azure-600);
  --cg-magenta: var(--cg-magenta-600);
  --cg-indigo:  var(--cg-indigo-600);
  --cg-coral:   var(--cg-coral-600);
  --cg-teal:    var(--cg-teal-600);

  /* === Therapeutic tokens (shade 300 — for 8+ hour sessions) === */
  --cg-violet-soft:  var(--cg-violet-300);
  --cg-azure-soft:   var(--cg-azure-300);
  --cg-magenta-soft: var(--cg-magenta-300);
  --cg-indigo-soft:  var(--cg-indigo-300);
  --cg-coral-soft:   var(--cg-coral-300);
  --cg-teal-soft:    var(--cg-teal-300);

  /* ======================================================
     COLOR — Neutrals (all indigo-tinted, hue ~240)
     ====================================================== */

  /* Dark theme — therapeutic */
  --cg-neutral-950: #1a1a2e;  /* Deep Night  — sidebar */
  --cg-neutral-900: #1e1e32;  /* Rich Night  — panels */
  --cg-neutral-800: #262640;  /* Bold Night  — editor */
  --cg-neutral-700: #303050;  /* Core Night  — cards */
  --cg-neutral-600: #3d3d5c;  /* Lite Night  — borders */
  --cg-neutral-500: #50506e;  /* Mist Night  — muted */

  /* Light theme */
  --cg-neutral-400: #A8A8C0;  /* Mist Day */
  --cg-neutral-300: #C4C4D8;  /* Lite Day */
  --cg-neutral-200: #E0E0ED;  /* Soft Day */
  --cg-neutral-100: #F0F0F7;  /* Pale Day */
  --cg-neutral-50:  #F8F8FC;  /* Ghost Day */

  /* Deeper surfaces (marketing / hero) */
  --cg-abyss: #0a0a14;
  --cg-deep:  #13131f;
  --cg-card-dark: #25253d;

  /* ======================================================
     GRADIENTS — the five named brand gradients
     ====================================================== */
  --cg-gradient-signature:  linear-gradient(135deg, #3B7DD6 0%, #8B3FC7 50%, #5145A8 100%);
  --cg-gradient-innovation: linear-gradient(135deg, #14A3A3 0%, #3B7DD6 50%, #8B3FC7 100%);
  --cg-gradient-vitality:   linear-gradient(135deg, #8B3FC7 0%, #F26355 50%, #B580E6 100%);
  --cg-gradient-data:       linear-gradient(135deg, #3B7DD6 0%, #5145A8 50%, #6B5DC7 100%);
  --cg-gradient-alert:      linear-gradient(135deg, #E0309E 0%, #F26355 100%);
  --cg-gradient-page:       linear-gradient(180deg, #0a0a14 0%, #13131f 100%);

  /* ======================================================
     COLOR — Semantic tokens (dark default)
     ====================================================== */
  --fg-1: #F8F8FC;   /* stark — headings on dark */
  --fg-2: #E0E0ED;   /* soft  — body on dark */
  --fg-3: #A6ADC8;   /* muted */
  --fg-4: #50506e;   /* disabled / divider text */

  --bg-1: var(--cg-abyss);       /* page */
  --bg-2: var(--cg-neutral-900); /* panel */
  --bg-3: var(--cg-neutral-800); /* elevated surface */
  --bg-4: var(--cg-neutral-700); /* card */

  --border-1: rgba(255,255,255,0.08);
  --border-2: rgba(139, 63, 199, 0.10);
  --border-focus: var(--cg-azure-300);

  --link: var(--cg-azure-600);
  --link-hover: var(--cg-violet-600);

  --brand-primary: var(--cg-violet-600);
  --brand-secondary: var(--cg-azure-600);
  --brand-tertiary: var(--cg-indigo-600);

  /* Semantic states */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;
  --info:    var(--cg-azure-600);

  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error:   var(--error);
  --color-info:    var(--info);

  /* ======================================================
     TYPOGRAPHY
     ====================================================== */
  /* Defaults */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-code:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-docs:    'Lexend', 'Inter', sans-serif;
  --font-a11y:    'Atkinson Hyperlegible', 'Inter', sans-serif;

  /* Backward compat aliases */
  --font-family-ui:   var(--font-body);
  --font-family-docs: var(--font-docs);
  --font-family-code: var(--font-code);

  /* Alternates */
  --font-display-alt-1: 'General Sans', 'Inter', sans-serif;
  --font-display-alt-2: 'IBM Plex Sans', 'Inter', sans-serif;
  --font-accent-alt-1:  'Source Serif Pro', Georgia, serif;
  --font-accent-alt-2:  'Recursive', 'Newsreader', serif;
  --font-code-alt-1:    'Fira Code', ui-monospace, monospace;
  --font-code-alt-2:    'Recursive Mono', ui-monospace, monospace;

  /* Type scale — major third 1.250 */
  --text-h1: 3.052rem;
  --text-h2: 2.441rem;
  --text-h3: 1.953rem;
  --text-h4: 1.563rem;
  --text-h5: 1.25rem;
  --text-h6: 1rem;
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.75rem;

  --font-size-min: 14px;
  --font-size-default: 16px;
  --font-size-large: 18px;
  --line-height-body: 1.6;
  --line-height-ui: 1.6;
  --line-height-code: 1.5;

  /* ======================================================
     SPACING (8px base)
     ====================================================== */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* RADII */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 9999px;

  /* SHADOWS — indigo-tinted, never pure black */
  --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-glow-violet:  0 0 40px rgba(202, 160, 240, 0.30);
  --shadow-glow-indigo:  0 0 40px rgba(81,  69, 168, 0.30);
  --shadow-glow-magenta: 0 0 30px rgba(224, 48, 158, 0.20);

  /* MOTION */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   350ms;
  --dur-slower: 500ms;
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Backward compat */
  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-base: var(--dur-base) var(--ease-out);

  /* GLASS */
  --glass-bg:     rgba(30, 30, 50, 0.50);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur:   blur(12px);

  /* FOCUS */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--cg-azure-300);

  /* ======================================================
     ACTIVE THEME VARIABLES (Default: Dark/Dusk)
     ====================================================== */
  --background-primary:   var(--cg-neutral-950);
  --background-secondary: var(--cg-neutral-900);
  --background-tertiary:  var(--cg-neutral-800);

  --surface-default: var(--cg-neutral-700);
  --surface-raised:  var(--cg-neutral-600);
  --surface-overlay: var(--cg-neutral-500);

  --text-primary:   var(--cg-neutral-50);
  --text-secondary: var(--cg-neutral-200);
  --text-muted:     var(--cg-neutral-400);

  --border-default: var(--cg-neutral-600);
  --border-focus:   var(--cg-azure-soft);

  --primary-action:       var(--cg-violet-soft);
  --primary-action-hover: var(--cg-violet-600);
  --secondary-action:     var(--cg-azure-soft);
}

/* === LIGHT THEME OVERRIDES ===
   DISABLED: The site is dark-mode-only. This block was causing dark text
   on dark backgrounds for users whose OS prefers light mode.
   Re-enable only when full light theme support (backgrounds, cards,
   gradients, glassmorphism) is implemented.

@media (prefers-color-scheme: light) {
  :root {
    --background-primary:   var(--cg-neutral-50);
    --background-secondary: var(--cg-neutral-100);
    --background-tertiary:  var(--cg-neutral-200);

    --surface-default: var(--cg-neutral-100);
    --surface-raised:  #ffffff;
    --surface-overlay: var(--cg-neutral-300);

    --text-primary:   var(--cg-neutral-900);
    --text-secondary: var(--cg-neutral-700);
    --text-muted:     var(--cg-neutral-500);

    --border-default: var(--cg-neutral-300);
    --border-focus:   var(--cg-azure-600);

    --primary-action:       var(--cg-violet-600);
    --primary-action-hover: var(--cg-violet-soft);
    --secondary-action:     var(--cg-azure-600);

    --bg-1: var(--cg-neutral-50);
    --bg-2: var(--cg-neutral-100);
    --bg-3: var(--cg-neutral-200);
    --bg-4: #ffffff;

    --fg-1: #1E1E32;
    --fg-2: #4A4A66;
    --fg-3: #6A6A84;
    --fg-4: var(--cg-neutral-400);
  }
}
*/

/* ======================================================
   SEMANTIC ELEMENT STYLES
   ====================================================== */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-md);
}
h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
h5 { font-size: var(--text-h5); font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; }
h6 { font-size: var(--text-h6); font-weight: 600; line-height: 1.4; }

p { margin: 0 0 var(--space-md); max-width: 75ch; }

blockquote, .quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-h5);
  line-height: 1.8;
  color: var(--cg-violet-300);
  border-left: 3px solid var(--cg-violet-600);
  padding-left: var(--space-lg);
  background: linear-gradient(90deg, rgba(139,63,199,0.08), transparent 60%);
}

code, pre, kbd, samp { font-family: var(--font-code); font-size: 0.875em; line-height: 1.5; }
code { background: var(--bg-3); color: var(--cg-azure-300); padding: 0.125em 0.375em; border-radius: var(--radius-sm); }
pre { background: var(--bg-2); color: var(--fg-2); padding: var(--space-md); border-radius: var(--radius-md); overflow-x: auto; border: 1px solid var(--border-1); }

a { color: var(--link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--link-hover); }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}