/* =============================================================================
 * NeuroGen design tokens: the ONE token file (UX unification, Session U0, 2026-10-08)
 * =============================================================================
 * Every token VALUE of the app lives here (master prompt §2.3). Other files only alias:
 *   - css/design-system.css keeps its names as `--X: var(--ng-ds-X)` where it loads;
 *   - the styles.css (--light-*, --dark-*, --primary-color...) and module_layout.css
 *     (--neurogen-*, the html[data-bs-theme] --bs-* block) variables moved here verbatim:
 *     both files load on every base.html page, exactly like this one.
 * Linked by templates/base.html right after Bootstrap's CSS, before every other sheet.
 * Module CSS uses tokens only: no colour literals and no :root blocks outside this file.
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * 1. The design-system palette and scales (formerly css/design-system.css :root),
 *    under --ng-ds-<the same name> (the canonical roles are section 5)
 * ----------------------------------------------------------------------------- */
:root {
    /* === BACKGROUNDS (Dark to Light) === */
    --ng-ds-neural-void: #0f1419;           /* Deepest background, body */
    --ng-ds-neural-deep: #15202b;           /* Secondary backgrounds, cards */
    --ng-ds-neural-surface: #192734;        /* Elevated surfaces, modals */
    --ng-ds-neural-elevated: #22303c;       /* Hover states, highlights */

    /* === BORDERS & DIVIDERS === */
    --ng-ds-neural-border: rgba(136, 153, 166, 0.15);        /* Subtle borders */
    --ng-ds-neural-border-accent: rgba(136, 153, 166, 0.25); /* Emphasized borders */
    --ng-ds-neural-divider: rgba(136, 153, 166, 0.1);        /* Section dividers */
    --ng-ds-neural-border-strong: rgba(136, 153, 166, 0.28);  /* Strong borders, active states */

    /* ==========================================
       SYNAPSE ACCENT COLORS
       Primary interactive color palette
       ========================================== */

    /* Primary - Google-Inspired Blue */
    --ng-ds-synapse-cyan: #8ab4f8;          /* Primary accent, links, CTAs */
    --ng-ds-synapse-cyan-hover: #aecbfa;    /* Hover state */
    --ng-ds-synapse-cyan-muted: rgba(138, 180, 248, 0.15);  /* Backgrounds */
    --ng-ds-synapse-cyan-glow: rgba(138, 180, 248, 0.4);    /* Box shadows */

    /* Secondary Accents */
    --ng-ds-synapse-teal: #78d9ec;          /* Secondary highlights */
    --ng-ds-synapse-emerald: #81c995;       /* Success states */
    --ng-ds-synapse-amber: #fdd663;         /* Warning states */
    --ng-ds-synapse-rose: #f28b82;          /* Error states */
    --ng-ds-synapse-violet: #c58af9;        /* Special accents */

    /* Module Accent Colors — True cyan used across all dashboard modules */
    --ng-ds-module-cyan: #22d3ee;
    --ng-ds-module-cyan-rgb: 34, 211, 238;
    --ng-ds-module-cyan-hover: rgba(34, 211, 238, 0.15);
    --ng-ds-module-cyan-subtle: rgba(34, 211, 238, 0.08);
    --ng-ds-module-cyan-border: rgba(34, 211, 238, 0.3);
    --ng-ds-module-cyan-glow: rgba(34, 211, 238, 0.2);

    /* Status Colors (Semantic) */
    --ng-ds-status-success: #34c759;
    --ng-ds-status-success-bg: rgba(52, 199, 89, 0.15);
    --ng-ds-status-warning: #ffcc00;
    --ng-ds-status-warning-bg: rgba(255, 204, 0, 0.15);
    --ng-ds-status-error: #ff453a;
    --ng-ds-status-error-bg: rgba(255, 69, 58, 0.15);
    --ng-ds-status-info: #8ab4f8;
    --ng-ds-status-info-bg: rgba(138, 180, 248, 0.15);

    /* Data Visualization Colors */
    --ng-ds-data-positive: #81c995;
    --ng-ds-data-negative: #f28b82;
    --ng-ds-data-warning: #fdd663;
    --ng-ds-data-highlight: #fbbf24;
    --ng-ds-data-neutral: #9aa0a6;
    --ng-ds-data-info: #8ab4f8;

    /* Accent Aliases (backward compat with admin_dashboard.css) */
    --ng-ds-accent-primary: var(--ng-ds-synapse-cyan);
    --ng-ds-accent-primary-bright: var(--ng-ds-synapse-cyan-hover);
    --ng-ds-accent-primary-glow: rgba(138, 180, 248, 0.12);
    --ng-ds-accent-secondary: #669df6;

    /* Module Accent Overrides */
    --ng-ds-affiliate-primary: #10b981;
    --ng-ds-affiliate-secondary: #34d399;
    --ng-ds-affiliate-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);

    /* ==========================================
       TYPOGRAPHY
       Font families and scale
       ========================================== */

    /* Font Families */
    --ng-ds-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ng-ds-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ng-ds-font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    --ng-ds-font-data: var(--ng-ds-font-body);  /* backward compat alias for admin_dashboard.css */

    /* Font Weights */
    --ng-ds-weight-regular: 400;
    --ng-ds-weight-medium: 500;
    --ng-ds-weight-semibold: 600;
    --ng-ds-weight-bold: 700;
    --ng-ds-weight-extrabold: 800;

    /* Font Sizes - Modular Scale (1.2 ratio) */
    --ng-ds-text-xs: 11px;       /* Micro labels, badges */
    --ng-ds-text-sm: 13px;       /* Secondary text, captions */
    --ng-ds-text-base: 16px;     /* Body text default (16px prevents iOS auto-zoom on input focus) */
    --ng-ds-text-md: 17px;       /* Emphasized body text */
    --ng-ds-text-lg: 19px;       /* Card headings */
    --ng-ds-text-xl: 24px;       /* Section titles */
    --ng-ds-text-2xl: 28px;      /* Page titles */
    --ng-ds-text-3xl: 34px;      /* Hero sections */
    --ng-ds-text-4xl: 48px;      /* Large hero text */

    /* Line Heights */
    --ng-ds-leading-tight: 1.15;
    --ng-ds-leading-snug: 1.35;
    --ng-ds-leading-normal: 1.6;
    --ng-ds-leading-relaxed: 1.75;

    /* Letter Spacing */
    --ng-ds-tracking-tight: -0.02em;
    --ng-ds-tracking-normal: 0;
    --ng-ds-tracking-wide: 0.05em;
    --ng-ds-tracking-wider: 0.15em;

    /* ==========================================
       TEXT COLORS
       ========================================== */
    --ng-ds-text-primary: #e7e9ea;          /* Main content text */
    --ng-ds-text-secondary: #8b98a5;        /* Supporting text */
    --ng-ds-text-muted: #6e767d;            /* De-emphasized text */
    --ng-ds-text-tertiary: #6e7681;         /* Tertiary text, between secondary and muted */
    --ng-ds-text-inverse: #15202b;          /* Text on light backgrounds */
    --ng-ds-text-link: var(--ng-ds-synapse-cyan); /* Links */
    --ng-ds-text-link-hover: var(--ng-ds-synapse-cyan-hover);

    /* ==========================================
       SPACING SCALE
       Consistent spacing tokens
       ========================================== */
    --ng-ds-space-1: 4px;
    --ng-ds-space-2: 8px;
    --ng-ds-space-3: 12px;
    --ng-ds-space-4: 16px;
    --ng-ds-space-5: 20px;
    --ng-ds-space-6: 24px;
    --ng-ds-space-8: 32px;
    --ng-ds-space-10: 40px;
    --ng-ds-space-12: 48px;
    --ng-ds-space-16: 64px;
    --ng-ds-space-20: 80px;

    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --ng-ds-radius-sm: 4px;      /* Small elements, badges */
    --ng-ds-radius-md: 8px;      /* Buttons, inputs */
    --ng-ds-radius-lg: 12px;     /* Cards, panels */
    --ng-ds-radius-xl: 16px;     /* Modals, large cards */
    --ng-ds-radius-full: 9999px; /* Pills, avatars */

    /* ==========================================
       SHADOWS
       ========================================== */
    --ng-ds-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ng-ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --ng-ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --ng-ds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.3);
    --ng-ds-shadow-glow-cyan: 0 0 20px var(--ng-ds-synapse-cyan-glow);
    --ng-ds-shadow-glow-lg: 0 0 40px var(--ng-ds-synapse-cyan-glow);

    /* ==========================================
       TRANSITIONS & ANIMATIONS
       ========================================== */
    --ng-ds-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ng-ds-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ng-ds-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ng-ds-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ng-ds-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ng-ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ng-ds-ease-smooth: var(--ng-ds-ease-default);  /* backward compat alias for admin_dashboard.css */

    --ng-ds-duration-fast: 150ms;
    --ng-ds-duration-normal: 250ms;
    --ng-ds-duration-slow: 400ms;

    --ng-ds-transition-fast: all var(--ng-ds-duration-fast) var(--ng-ds-ease-default);
    --ng-ds-transition-normal: all var(--ng-ds-duration-normal) var(--ng-ds-ease-default);
    --ng-ds-transition-slow: all var(--ng-ds-duration-slow) var(--ng-ds-ease-default);

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */
    --ng-ds-z-base: 0;
    --ng-ds-z-dropdown: 100;
    --ng-ds-z-sticky: 200;
    --ng-ds-z-fixed: 300;
    --ng-ds-z-modal-backdrop: 400;
    --ng-ds-z-modal: 500;
    --ng-ds-z-popover: 600;
    --ng-ds-z-toast: 700;
}

/* -----------------------------------------------------------------------------
 * 2. The legacy theme variables (formerly css/styles.css :root), verbatim
 * ----------------------------------------------------------------------------- */
:root {
  /* Light theme variables */
  --light-bg-primary: #ffffff;
  --light-bg-secondary: #f8f9fa;
  --light-bg-card: #ffffff;
  --light-bg-input: #ffffff;
  --light-border-color: #dee2e6;
  --light-text-primary: #212529;
  --light-text-secondary: #6c757d;
  
  /* Dark theme variables */
  --dark-bg-primary: #121212;
  --dark-bg-secondary: #1c3156;  /* Header background */
  --dark-bg-card: #2d3238;       /* Card background */
  --dark-bg-input: #343a40;      /* Form input background */
  --dark-border-color: #495057;  /* Border color */
  --dark-text-primary: #f8f9fa;  /* Main text color */
  --dark-text-secondary: #adb5bd; /* Secondary text color */
  --dark-muted-text: #a0aec0;     /* Muted text color */
  
  /* Component-specific dark theme colors */
  --dark-alert-info-bg: #1f4f6e;
  --dark-alert-info-border: #216d93;
  --dark-alert-success-bg: #1e5631;
  --dark-alert-success-border: #2a7342;
  --dark-alert-danger-bg: #742029;
  --dark-alert-danger-border: #972b35;
  --dark-alert-warning-bg: #7a5a10;
  --dark-alert-warning-border: #9d7213;
  
  /* Code display */
  --dark-code-bg: #2a2a2a;
  --dark-code-color: #e0e0e0;
  
  /* Bootstrap color overrides */
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #0dcaf0;
  
  /* Layout variables */
  --border-radius: 0.5rem;
  --transition-speed: 0.3s;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --dark-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* -----------------------------------------------------------------------------
 * 3. The --neurogen-* palette (formerly css/module_layout.css :root), verbatim
 * ----------------------------------------------------------------------------- */
:root {
    /* NeuroGen Color Palette */
    --neurogen-bg-primary: #121212;        /* Main background */
    --neurogen-bg-secondary: #1a1a1a;      /* Header/nav background */
    --neurogen-bg-card: #242424;           /* Card backgrounds */
    --neurogen-bg-input: #2d2d2d;          /* Input backgrounds */
    --neurogen-border: #404040;            /* Border color */
    --neurogen-text-primary: #ffffff;      /* Primary text */
    --neurogen-text-secondary: #b0b0b0;    /* Secondary text */
    --neurogen-text-muted: #808080;        /* Muted text */
    --neurogen-accent: #0d6efd;            /* Primary accent */
    --neurogen-accent-hover: #0b5ed7;      /* Accent hover */
    --neurogen-success: #28a745;           /* Success color */
    --neurogen-warning: #ffc107;           /* Warning color */
    --neurogen-danger: #dc3545;            /* Danger color */
}

/* Bootstrap's dark-theme variables from the palette above (formerly css/module_layout.css) */
html[data-bs-theme="dark"],
html[data-theme="dark"] {
    --bs-body-bg: var(--neurogen-bg-primary);
    --bs-body-color: var(--neurogen-text-primary);
    --bs-border-color: var(--neurogen-border);
    --bs-card-bg: var(--neurogen-bg-card);
}

/* -----------------------------------------------------------------------------
 * 4. Bootstrap 5.3.0-alpha1 compatibility pins (UX unification, C4)
 *    base.html moved from Bootstrap 5.3.0-alpha1 to 5.3.8. These are the theme variables
 *    5.3.8 changed or removed, at their alpha1 values, so the upgrade alone changes no page's
 *    colours (e.g. dark body text #adb5bd, headings #fff, the *-text names renamed to
 *    *-text-emphasis). The member area moves to the design tokens on purpose (body.ng-member).
 *    Same specificity as Bootstrap's own blocks, which load just before this file.
 * ----------------------------------------------------------------------------- */
:root,
[data-bs-theme=light] {
    --bs-primary-text: #0a58ca;
    --bs-secondary-text: #6c757d;
    --bs-success-text: #146c43;
    --bs-info-text: #087990;
    --bs-warning-text: #997404;
    --bs-danger-text: #b02a37;
    --bs-light-text: #6c757d;
    --bs-dark-text: #495057;
    --bs-secondary-bg-subtle: #f8f9fa;
    --bs-secondary-border-subtle: #e9ecef;
    --bs-border-radius-2xl: 2rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--bs-body-color-rgb), 0.075);
    --bs-form-control-bg: var(--bs-body-bg);
    --bs-form-control-disabled-bg: var(--bs-secondary-bg);
    /* 5.3.8's components read *-text-emphasis and --bs-form-*valid-color where alpha1 read *-text */
    --bs-primary-text-emphasis: #0a58ca;
    --bs-secondary-text-emphasis: #6c757d;
    --bs-success-text-emphasis: #146c43;
    --bs-info-text-emphasis: #087990;
    --bs-warning-text-emphasis: #997404;
    --bs-danger-text-emphasis: #b02a37;
    --bs-light-text-emphasis: #6c757d;
    --bs-form-valid-color: #146c43;
    --bs-form-invalid-color: #b02a37;
}

[data-bs-theme=dark] {
    --bs-body-color: #adb5bd;
    --bs-body-color-rgb: 173,181,189;
    --bs-emphasis-color-rgb: 248,249,250;
    --bs-secondary-color: rgba(173, 181, 189, 0.75);
    --bs-secondary-color-rgb: 173,181,189;
    --bs-tertiary-color: rgba(173, 181, 189, 0.5);
    --bs-tertiary-color-rgb: 173,181,189;
    --bs-primary-text: #6ea8fe;
    --bs-secondary-text: #dee2e6;
    --bs-success-text: #75b798;
    --bs-info-text: #6edff6;
    --bs-warning-text: #ffda6a;
    --bs-danger-text: #ea868f;
    --bs-light-text: #f8f9fa;
    --bs-dark-text: #dee2e6;
    --bs-secondary-bg-subtle: #212529;
    --bs-secondary-border-subtle: #495057;
    --bs-info-border-subtle: #055160;
    --bs-warning-border-subtle: #664d03;
    --bs-heading-color: #fff;
    --bs-link-hover-color: #9ec5fe;
    --bs-link-hover-color-rgb: 158,197,254;
    /* the same names in the dark theme (this block follows the light one above, which would win otherwise) */
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #dee2e6;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-form-valid-color: #75b798;
    --bs-form-invalid-color: #ea868f;
}

/* Component rules 5.3.8 changed, at alpha1's look on pages without the member layer (the member
   area's own are in css/ng-components.css). Found by the 2026-10-08 reviews and a browser comparison
   of main and the branch on such a page (tests/browser/ux_nonmember_compare.py).
   Tables: 5.3.8 gives every cell its own colour (the emphasis colour, #fff here) on the page
   background and lightens striped, hovered and active rows; alpha1 left cells transparent in the
   table's colour (so styles.css's `[data-bs-theme="dark"] .table { color }` and a page's own
   reached them) and darkened those rows. Bootstrap's colour variants (.table-dark, ...) keep their
   own backgrounds. */
:where(body:not(.ng-member)) .table {
    --bs-table-color: currentcolor;
}

:where(body:not(.ng-member)) .table:where(:not(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger, .table-light, .table-dark)) {
    --bs-table-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    color: var(--bs-body-color);
}

:where(body:not(.ng-member)) .table-dark {
    --bs-table-border-color: #373b3e;
    color: #fff;
}

/* a colour variant's text colour, where alpha1 set it, at Bootstrap's specificity: its cells inherit it,
   and a page's own `.table { color }` (the admin portal's) or styles.css's dark one still wins, as on main */
:where(body:not(.ng-member)) :is(.table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger, .table-light) {
    color: #000;
}

/* Dialogs: alpha1 left --bs-modal-color empty, so a dialog's text took the page's colour; 5.3.8
   sets the body text colour (#adb5bd here, under the white the pages had) */
:where(body:not(.ng-member)) .modal {
    --bs-modal-color: currentcolor;
}

/* Checkboxes, radios and switches: alpha1 filled them with --bs-form-control-bg (the pages' own
   background), 5.3.8 with --bs-body-bg */
:where(body:not(.ng-member)) .form-check-input {
    --bs-form-check-bg: var(--bs-form-control-bg);
}

/* A nav link's keyboard focus: 5.3.8 added `.nav-link:focus-visible { outline: 0; box-shadow: <a
   25 % blue glow> }` (two classes), which beat the browser's ring (and design-system.css's, which
   puts its own back where that sheet loads). */
:where(body:not(.ng-member)) .nav-link:focus-visible {
    outline: revert;
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
 * 5. The roles (UX contract §2.3): the only colours, sizes and layers module CSS uses.
 *    New names, so defining them everywhere changes nothing; section 6 points the member
 *    area's legacy names at them.
 * ----------------------------------------------------------------------------- */
:root {
    /* Palette primitives behind the roles (modules never use these directly) */
    --ng-cyan-rgb: 34, 211, 238;                 /* #22d3ee */
    --ng-blue-rgb: 138, 180, 248;                /* #8ab4f8, the brand blue */

    /* THE ACCENT: one line, the owner's decision (U0 step 8).
       A: var(--ng-cyan-rgb), cyan for every interactive control (the owner's first answer, 2026-10-08).
       B (the value): the brand blue, Master Admin's, everywhere in the member app (the owner, 2026-10-17).
       C: A here and --ng-accent-shell-rgb below set to var(--ng-blue-rgb). */
    --ng-accent-rgb: var(--ng-blue-rgb);
    --ng-accent-shell-rgb: var(--ng-accent-rgb);  /* the sidebar and header (option C only) */

    --ng-accent: rgb(var(--ng-accent-rgb));
    --ng-accent-hover: color-mix(in srgb, rgb(var(--ng-accent-rgb)) 82%, #ffffff);
    --ng-accent-active: color-mix(in srgb, rgb(var(--ng-accent-rgb)) 85%, #000000);
    --ng-tint-alpha: 0.12;                       /* one tint strength: accent, status and neutral tints */
    --ng-accent-tint: rgba(var(--ng-accent-rgb), var(--ng-tint-alpha));
    --ng-accent-tint-strong: rgba(var(--ng-accent-rgb), 0.2);
    --ng-accent-border: rgba(var(--ng-accent-rgb), 0.3);
    --ng-accent-glow: rgba(var(--ng-accent-rgb), 0.25);
    --ng-accent-shell: rgb(var(--ng-accent-shell-rgb));
    --ng-accent-shell-hover: color-mix(in srgb, rgb(var(--ng-accent-shell-rgb)) 82%, #ffffff);
    --ng-accent-shell-tint: rgba(var(--ng-accent-shell-rgb), var(--ng-tint-alpha));
    --ng-on-accent: #0f172a;                     /* text on the accent: dark, never white */
    --ng-on-accent-rgb: 15, 23, 42;              /* the same, for Bootstrap's .text-white on a blue fill */
    --ng-focus-color: rgb(var(--ng-accent-rgb));
    --ng-focus-ring: 0 0 0 2px #0f1419, 0 0 0 4px rgb(var(--ng-accent-rgb));

    /* Brand: the logo gradient, on the logo and identity marks only (never a control) */
    --ng-brand-gradient: linear-gradient(135deg, #8ab4f8 0%, #78d9ec 100%);

    /* Bootstrap 5.3's own --bs-secondary-rgb (#6c757d): what a -secondary fill, border or link inside a member
       .text-secondary keeps (ng-components.css re-points the text utility only; U-final) */
    --ng-bs-secondary-rgb: 108, 117, 125;

    /* Paper: a document shown as it will be seen, light on the dark page (the Assets grid, the Studio's page
       previews); its ink and muted ink (U-final, the Studio's request; test_ng_contrast) */
    --ng-paper: #ffffff;
    --ng-paper-text: #1f2937;                    /* 14.7:1 on the paper */
    --ng-paper-text-muted: #4b5563;              /* 7.6:1 on the paper, 6.8:1 on a #f3f3f3 strip */

    /* Surfaces */
    --ng-bg: #0f1419;                            /* the page */
    --ng-surface-rgb: 15, 23, 42;
    --ng-surface-1: rgba(var(--ng-surface-rgb), 0.9);   /* panels and wells: the module panel, inputs, inset rows */
    --ng-surface-2: rgba(var(--ng-surface-rgb), 0.6);   /* cards, stat cards, banners (over a panel) */
    --ng-surface-3: #192734;                     /* opaque overlays: modals, menus, toasts */
    --ng-surface-hover: #22303c;
    --ng-border: rgba(136, 153, 166, 0.15);
    --ng-border-strong: rgba(136, 153, 166, 0.28);
    --ng-border-input-rgb: 113, 128, 150;
    --ng-border-input: rgb(var(--ng-border-input-rgb));   /* 3:1 on every surface, hover too (form controls) */

    /* Scrim: what dims the page under a modal or a drawer */
    --ng-scrim: rgba(var(--ng-surface-rgb), 0.75);

    /* Text */
    --ng-text-rgb: 231, 233, 234;
    --ng-text: rgb(var(--ng-text-rgb));
    --ng-text-muted: #94a3b8;                    /* 4.5:1 on every surface, the hover one too */

    /* Status: fixed meanings, always with an icon or a word */
    --ng-success-rgb: 52, 211, 153;
    --ng-success: rgb(var(--ng-success-rgb));    /* #34d399 */
    --ng-success-bg: rgba(var(--ng-success-rgb), var(--ng-tint-alpha));
    --ng-success-border: rgba(var(--ng-success-rgb), 0.3);
    --ng-success-text-rgb: 110, 231, 183;
    --ng-success-text: rgb(var(--ng-success-text-rgb));   /* #6ee7b7 */
    --ng-warning-rgb: 251, 191, 36;
    --ng-warning: rgb(var(--ng-warning-rgb));    /* #fbbf24: warnings only, never branding */
    --ng-warning-bg: rgba(var(--ng-warning-rgb), var(--ng-tint-alpha));
    --ng-warning-border: rgba(var(--ng-warning-rgb), 0.3);
    --ng-warning-text-rgb: 252, 211, 77;
    --ng-warning-text: rgb(var(--ng-warning-text-rgb));   /* #fcd34d */
    --ng-danger-rgb: 248, 113, 113;
    --ng-danger: rgb(var(--ng-danger-rgb));      /* #f87171 */
    --ng-danger-bg: rgba(var(--ng-danger-rgb), var(--ng-tint-alpha));
    --ng-danger-border: rgba(var(--ng-danger-rgb), 0.3);
    --ng-danger-text-rgb: 252, 165, 165;
    --ng-danger-text: rgb(var(--ng-danger-text-rgb));   /* #fca5a5 */
    --ng-danger-solid: #ef4444;                  /* destructive fills (white text is not used on it) */
    --ng-info-rgb: 138, 180, 248;
    --ng-info: rgb(var(--ng-info-rgb));          /* #8ab4f8 */
    --ng-info-bg: rgba(var(--ng-info-rgb), var(--ng-tint-alpha));
    --ng-info-border: rgba(var(--ng-info-rgb), 0.3);
    --ng-info-text-rgb: 174, 203, 250;
    --ng-info-text: rgb(var(--ng-info-text-rgb));   /* #aecbfa */
    --ng-neutral-rgb: 148, 163, 184;
    --ng-neutral: rgb(var(--ng-neutral-rgb));    /* #94a3b8: draft, cancelled, paused, not set */
    --ng-neutral-bg: rgba(var(--ng-neutral-rgb), var(--ng-tint-alpha));
    --ng-neutral-border: rgba(var(--ng-neutral-rgb), 0.3);
    --ng-neutral-text-rgb: 155, 169, 189;
    --ng-neutral-text: rgb(var(--ng-neutral-text-rgb));   /* #9ba9bd: a step over the muted text, AA on its tint over a hovered row */

    /* Plans: one colour per tier, the same everywhere (from today's .tier-* badges)
       Professional is pink, the owner's answer of 2026-10-08: its old amber was the warning colour (guide §12). */
    --plan-free: #9ba9bd;          --plan-free-bg: rgba(148, 163, 184, 0.12);         --plan-free-border: rgba(148, 163, 184, 0.25);
    --plan-starter: #8ab4f8;       --plan-starter-bg: rgba(138, 180, 248, 0.12);      --plan-starter-border: rgba(138, 180, 248, 0.25);
    --plan-professional: #f9a8d4;  --plan-professional-bg: rgba(249, 168, 212, 0.12); --plan-professional-border: rgba(249, 168, 212, 0.25);
    --plan-business: #81c995;      --plan-business-bg: rgba(129, 201, 149, 0.12);     --plan-business-border: rgba(129, 201, 149, 0.25);
    --plan-enterprise: #c88ff9;    --plan-enterprise-bg: rgba(197, 138, 249, 0.12);   --plan-enterprise-border: rgba(197, 138, 249, 0.25);
    --plan-agency: #2dd4bf;        --plan-agency-bg: rgba(45, 212, 191, 0.12);        --plan-agency-border: rgba(45, 212, 191, 0.25);
    --plan-demo: var(--plan-free); --plan-demo-bg: var(--plan-free-bg);              --plan-demo-border: var(--plan-free-border);

    /* Categories: stat-icon tints, platform marks, chart series. Fixed order, validated
       (dataviz validate_palette.js --mode dark --surface #0f1419: lightness band, chroma,
       colour-blind separation ΔE >= 15.4 adjacent, contrast). Charts use --ng-chart-1..8 in
       this order and never cycle; icons on a tinted tile use -fg on -tint. */
    --ng-cat-blue: #3b82f6;    --ng-cat-blue-fg: #60a5fa;    --ng-cat-blue-tint: rgba(96, 165, 250, 0.15);
    --ng-cat-teal: #0d9488;    --ng-cat-teal-fg: #2dd4bf;    --ng-cat-teal-tint: rgba(45, 212, 191, 0.15);
    --ng-cat-indigo: #6366f1;  --ng-cat-indigo-fg: #818cf8;  --ng-cat-indigo-tint: rgba(129, 140, 248, 0.15);
    --ng-cat-green: #16a34a;   --ng-cat-green-fg: #4ade80;   --ng-cat-green-tint: rgba(74, 222, 128, 0.15);
    --ng-cat-cyan: #0891b2;    --ng-cat-cyan-fg: #22d3ee;    --ng-cat-cyan-tint: rgba(34, 211, 238, 0.15);
    --ng-cat-amber: #d97706;   --ng-cat-amber-fg: #fbbf24;   --ng-cat-amber-tint: rgba(251, 191, 36, 0.15);
    --ng-cat-violet: #8b5cf6;  --ng-cat-violet-fg: #a78bfa;  --ng-cat-violet-tint: rgba(167, 139, 250, 0.15);
    --ng-cat-pink: #ec4899;    --ng-cat-pink-fg: #f472b6;    --ng-cat-pink-tint: rgba(244, 114, 182, 0.15);
    /* violet as badge text (the legacy .ng-badge--purple, .mod-badge-purple): 4.5:1 on its tint */
    --ng-cat-violet-text: #c4b5fd;
    --ng-chart-1: var(--ng-cat-blue);
    --ng-chart-2: var(--ng-cat-teal);
    --ng-chart-3: var(--ng-cat-indigo);
    --ng-chart-4: var(--ng-cat-green);
    --ng-chart-5: var(--ng-cat-cyan);
    --ng-chart-6: var(--ng-cat-amber);
    --ng-chart-7: var(--ng-cat-violet);
    --ng-chart-8: var(--ng-cat-pink);

    /* Type: one UI family (the one that renders today) and a monospace; 12 px is the floor */
    --ng-font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ng-font-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace;
    --ng-text-xs: 12px;
    --ng-text-sm: 13px;
    --ng-text-base: 16px;
    --ng-text-md: 17px;
    --ng-text-lg: 19px;
    --ng-text-xl: 24px;
    --ng-text-2xl: 28px;
    --ng-text-3xl: 34px;
    --ng-text-4xl: 48px;
    --ng-weight-regular: 400;
    --ng-weight-medium: 500;
    --ng-weight-semibold: 600;
    --ng-weight-bold: 700;

    /* Space, radius, shadow, motion: the design-system scales */
    --ng-space-1: var(--ng-ds-space-1);  --ng-space-2: var(--ng-ds-space-2);  --ng-space-3: var(--ng-ds-space-3);
    --ng-space-4: var(--ng-ds-space-4);  --ng-space-5: var(--ng-ds-space-5);  --ng-space-6: var(--ng-ds-space-6);
    --ng-space-8: var(--ng-ds-space-8);  --ng-space-10: var(--ng-ds-space-10); --ng-space-12: var(--ng-ds-space-12);
    --ng-space-16: var(--ng-ds-space-16); --ng-space-20: var(--ng-ds-space-20);
    --ng-radius-sm: var(--ng-ds-radius-sm); --ng-radius-md: var(--ng-ds-radius-md); --ng-radius-lg: var(--ng-ds-radius-lg);
    --ng-radius-xl: var(--ng-ds-radius-xl); --ng-radius-full: var(--ng-ds-radius-full);
    --ng-shadow-sm: var(--ng-ds-shadow-sm); --ng-shadow-md: var(--ng-ds-shadow-md); --ng-shadow-lg: var(--ng-ds-shadow-lg);
    --ng-shadow-xl: var(--ng-ds-shadow-xl);
    --ng-duration-fast: var(--ng-ds-duration-fast); --ng-duration-normal: var(--ng-ds-duration-normal);
    --ng-duration-slow: var(--ng-ds-duration-slow); --ng-ease: var(--ng-ds-ease-default);

    /* Control heights: buttons, tabs and Bootstrap's .btn (through its padding) stand this tall.
       On phones every control is at least the touch target (mobile.css) */
    --ng-control-h: 36px;
    --ng-control-h-sm: 30px;
    --ng-control-h-lg: 44px;
    --ng-touch-target: 44px;

    /* Layers, aligned to Bootstrap's real stack, so a toast sits above a modal. The legacy
       --z-* (100-700) stays for the code that uses it; new code uses these. */
    --ng-layer-dropdown: 1000;
    --ng-layer-sticky: 1020;
    --ng-layer-fixed: 1030;
    --ng-layer-drawer: 1045;
    --ng-layer-modal-backdrop: 1050;
    --ng-layer-modal: 1055;
    --ng-layer-popover: 1070;
    --ng-layer-tooltip: 1080;
    --ng-layer-toast: 1090;
    /* Above the visual editor (page-editor.css: the editor at 10001, its own menus and panels up to 100060): while it
       is open, the shell lifts the page's dialogs and toasts over all of it (shell.css; U-final, the Studio's request) */
    --ng-layer-over-editor-backdrop: 100100;
    --ng-layer-over-editor-modal: 100110;
    --ng-layer-over-editor-toast: 100200;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ng-duration-fast: 0ms;
        --ng-duration-normal: 0ms;
        --ng-duration-slow: 0ms;
    }
}

/* -----------------------------------------------------------------------------
 * 6. The member area (body.ng-member): the legacy names point at the roles.
 *    Declared on <body>: var() resolves where it is declared, so a :root alias would keep its
 *    :root value (and the derived legacy names are re-declared here for the same reason).
 *    Master Admin, docs, auth and marketing pages never carry body.ng-member: they keep the
 *    values of sections 1-4. No literal here: every value is a role.
 * ----------------------------------------------------------------------------- */
body.ng-member {
    /* the shell's --synapse-cyan and the content's --module-cyan (cyan off the member area): one accent */
    /* the help drawer's accents (help-drawer.css declares them on :root, where --synapse-cyan is the old blue) */
    --ng-help-cyan: var(--ng-accent);
    --ng-help-teal: var(--ng-accent-hover);
    --synapse-cyan: var(--ng-accent-shell);
    --synapse-cyan-hover: var(--ng-accent-shell-hover);
    --synapse-cyan-muted: var(--ng-accent-shell-tint);
    --synapse-cyan-glow: rgba(var(--ng-accent-shell-rgb), 0.4);
    --synapse-teal: var(--ng-accent-hover);      /* the far end of the accent gradients (#78d9ec, a cyan, off the member area) */
    --accent-primary: var(--ng-accent-shell);
    --accent-primary-bright: var(--ng-accent-shell-hover);
    --accent-primary-glow: rgba(var(--ng-accent-shell-rgb), 0.12);
    --shadow-glow-cyan: 0 0 20px rgba(var(--ng-accent-shell-rgb), 0.4);
    --shadow-glow-lg: 0 0 40px rgba(var(--ng-accent-shell-rgb), 0.4);
    --module-cyan: var(--ng-accent);
    --module-cyan-rgb: var(--ng-accent-rgb);
    --module-cyan-hover: rgba(var(--ng-accent-rgb), 0.15);
    --module-cyan-subtle: rgba(var(--ng-accent-rgb), 0.08);
    --module-cyan-border: var(--ng-accent-border);
    --module-cyan-glow: rgba(var(--ng-accent-rgb), 0.2);
    --text-link: var(--ng-accent);
    --text-link-hover: var(--ng-accent-hover);
    --primary-color: var(--ng-accent);
    --neurogen-accent: var(--ng-accent);
    --neurogen-accent-hover: var(--ng-accent-hover);
    --org-accent: var(--ng-accent);
    --org-accent-dim: var(--ng-accent-tint);

    /* layers: the legacy --z-* scale (100-700) sat under every Bootstrap modal (1055) */
    --z-dropdown: var(--ng-layer-dropdown);
    --z-sticky: var(--ng-layer-sticky);
    --z-fixed: var(--ng-layer-fixed);
    --z-modal-backdrop: var(--ng-layer-modal-backdrop);
    --z-modal: var(--ng-layer-modal);
    --z-popover: var(--ng-layer-popover);
    --z-toast: var(--ng-layer-toast);

    /* text: one primary, one muted that passes AA on every surface */
    --text-primary: var(--ng-text);
    --neurogen-text-primary: var(--ng-text);
    --dark-text-primary: var(--ng-text);
    --text-secondary: var(--ng-text-muted);
    --text-muted: var(--ng-text-muted);
    --text-tertiary: var(--ng-text-muted);
    --secondary-color: var(--ng-text-muted);
    --dark-text-secondary: var(--ng-text-muted);
    --dark-muted-text: var(--ng-text-muted);
    --neurogen-text-secondary: var(--ng-text-muted);
    --neurogen-text-muted: var(--ng-text-muted);
    --data-neutral: var(--ng-text-muted);

    /* one status set */
    --status-success: var(--ng-success);
    --status-success-bg: var(--ng-success-bg);
    --status-warning: var(--ng-warning);
    --status-warning-bg: var(--ng-warning-bg);
    --status-error: var(--ng-danger);
    --status-error-bg: var(--ng-danger-bg);
    --status-info: var(--ng-info);
    --status-info-bg: var(--ng-info-bg);
    --synapse-emerald: var(--ng-success);
    --synapse-amber: var(--ng-warning);
    --synapse-rose: var(--ng-danger);
    --data-positive: var(--ng-success);
    --data-negative: var(--ng-danger);
    --data-warning: var(--ng-warning);
    --data-info: var(--ng-info);
    --success-color: var(--ng-success);
    --danger-color: var(--ng-danger);
    --warning-color: var(--ng-warning);
    --info-color: var(--ng-info);
    --neurogen-success: var(--ng-success);
    --neurogen-warning: var(--ng-warning);
    --neurogen-danger: var(--ng-danger);
    --dark-alert-info-bg: var(--ng-info-bg);
    --dark-alert-info-border: var(--ng-info-border);
    --dark-alert-success-bg: var(--ng-success-bg);
    --dark-alert-success-border: var(--ng-success-border);
    --dark-alert-danger-bg: var(--ng-danger-bg);
    --dark-alert-danger-border: var(--ng-danger-border);
    --dark-alert-warning-bg: var(--ng-warning-bg);
    --dark-alert-warning-border: var(--ng-warning-border);

    /* module_layout.css's graphite palette: the navy surfaces */
    --neurogen-bg-primary: var(--ng-bg);
    --neurogen-bg-secondary: var(--ng-surface-3);
    --neurogen-bg-card: var(--ng-surface-3);
    --neurogen-bg-input: var(--ng-surface-3);
    --neurogen-border: var(--ng-border-strong);
    --dark-bg-primary: var(--ng-bg);
    --dark-bg-card: var(--ng-surface-3);
    --dark-bg-input: var(--ng-surface-3);
    --dark-border-color: var(--ng-border-strong);

    /* the 12 px type floor */
    --text-xs: var(--ng-text-xs);

    /* one UI family and the system monospace (css/ng-fonts.css aliases the old names) */
    --font-display: var(--ng-font-ui);
    --font-body: var(--ng-font-ui);
    --font-data: var(--ng-font-ui);
    --font-family: var(--ng-font-ui);
    --font-mono: var(--ng-font-mono);
    --bs-font-sans-serif: var(--ng-font-ui);
    --bs-body-font-family: var(--ng-font-ui);
    --bs-font-monospace: var(--ng-font-mono);

    /* Bootstrap's own variables, which its utilities and components read */
    --bs-primary: var(--ng-accent);
    --bs-primary-rgb: var(--ng-accent-rgb);
    --bs-link-color: var(--ng-accent);
    --bs-link-color-rgb: var(--ng-accent-rgb);
    --bs-link-hover-color: var(--ng-accent-hover);
    --bs-focus-ring-color: var(--ng-focus-color);
    --bs-success: var(--ng-success);
    --bs-success-rgb: var(--ng-success-rgb);
    --bs-warning: var(--ng-warning);
    --bs-warning-rgb: var(--ng-warning-rgb);
    --bs-danger: var(--ng-danger);
    --bs-danger-rgb: var(--ng-danger-rgb);
    --bs-info: var(--ng-info);
    --bs-info-rgb: var(--ng-info-rgb);
    --bs-body-color: var(--ng-text);
    --bs-secondary-color: var(--ng-text-muted);
    --bs-border-color: var(--ng-border-strong);
}