/* ==========================================================================
   DESIGN TOKENS — The Gomez Group website + CRM
   Version 0.1.0 · 2026-09-22 · Track: visual design foundation

   Original work written for this project (clean-room). Every derived colour
   was generated with the project's own script (OKLCH hue-locked, lightness
   solved against WCAG 2.2 contrast targets). See docs/research/design-system.md
   for the rationale, the full contrast table, and component specs.

   --------------------------------------------------------------------------
   HOW TO USE
   --------------------------------------------------------------------------
   1. Load this file first, before any component CSS.
   2. Components use ONLY semantic tokens (layer 3+): --color-*, --text-*,
      --space-*, --radius-*, --shadow-*, --motion-*, --control-*, etc.
      Never reference --palette-* or --brand-* from a component.
   3. Scopes (set as attributes, usually on <html>, but any element works):

        data-product="site" | "app"       Public website (default) vs CRM
        data-theme="light" | "dark" | "system"
                                          light is the default. "system" follows
                                          the OS. "dark" on a <section> makes an
                                          inverse (charcoal) band on the public site.
        data-density="comfortable" | "compact"   (CRM only; default comfortable)

      Examples:
        Public site: <html lang="en" data-product="site" data-theme="light">
        CRM:         <html lang="en" data-product="app" data-theme="system">
        Dark band:   <section data-theme="dark"> … </section>

   4. IMPORTANT CSS GOTCHA (why the "alias" block exists):
      A custom property whose value uses var() is resolved on the element that
      declares it; descendants inherit the already-resolved value. Composite
      tokens (focus ring, shadows, message-status maps) are therefore declared
      on every scope root — ":root, [data-theme], [data-product], [data-density]"
      — so a dark section or the CRM scope gets correctly re-resolved values.
      If you add a composite token, put it in that block.

   5. Media queries cannot read custom properties. Breakpoints are listed in
      section 2.9 and must be written as literal em values in @media rules.

   6. Multi-tenant (SaaS) later: a tenant brand overrides ONLY the --brand-*
      block (section 1.3), using values produced by the palette-derivation
      script so that every contrast guarantee still holds.
   ========================================================================== */


/* ==========================================================================
   0. FONT FALLBACKS WITH METRIC OVERRIDES
   --------------------------------------------------------------------------
   These local() faces stand in while the web fonts load, sized to match so
   the page does not jump (reduces layout shift). Values were computed from
   the OFL font files (Inter 400 @ opsz 14; Newsreader 500 @ opsz 72) against
   Arial / Georgia metrics. The real @font-face rules for Inter and Newsreader
   (self-hosted woff2) live in fonts.css — see design-system.md §5.3.
   Liberation Sans is metric-compatible with Arial (Linux).
   ========================================================================== */

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 104.26%;
  ascent-override: 70.5%;
  descent-override: 25.42%;
  line-gap-override: 0%;
}


/* ==========================================================================
   1. PRIMITIVES  (raw values — never used directly by components)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1.1 Warm-stone neutral ladder (light end)
     OKLCH hue 75, chroma 0.008. Anchors 50 / 900 / 950 are the brand's
     observed ivory, primary text and charcoal.
     ------------------------------------------------------------------------ */
  --palette-stone-0:   #FFFFFF;  /* pure white: cards, inputs on ivory          */
  --palette-stone-50:  #F7F5F0;  /* BRAND warm ivory: page canvas              */
  --palette-stone-100: #F0ECE7;  /* alternate band, sunken well, row hover      */
  --palette-stone-150: #E9E5E0;  /* pressed / selected neutral                  */
  --palette-stone-200: #DFDCD7;  /* hairline dividers (decorative only)         */
  --palette-stone-300: #CAC7C2;  /* decorative borders, disabled outlines       */
  --palette-stone-400: #8B8883;  /* STRONG border: >= 3:1 on white/ivory/100    */
  --palette-stone-500: #696561;  /* muted text: >= 4.6:1 on every light surface */
  --palette-stone-600: #55524E;  /* secondary text: >= 6.6:1                    */
  --palette-stone-700: #403D39;
  --palette-stone-800: #2B2826;  /* primary button hover                        */
  --palette-stone-900: #191817;  /* BRAND primary text (ink)                    */
  --palette-stone-950: #0B0B0D;  /* BRAND charcoal                              */

  /* ------------------------------------------------------------------------
     1.2 Night ladder (dark surfaces: CRM dark mode, public inverse bands)
     ------------------------------------------------------------------------ */
  --palette-night-0:   #0B0B0D;  /* BRAND charcoal: dark canvas                 */
  --palette-night-50:  #141210;  /* subtle band                                 */
  --palette-night-100: #1B1916;  /* card / panel                                */
  --palette-night-150: #22201D;  /* raised / hover                              */
  --palette-night-200: #2D2B28;  /* dividers, pressed                           */
  --palette-night-300: #3F3D3A;  /* decorative border                           */
  --palette-night-400: #6D6A65;  /* STRONG border: >= 3:1 on dark surfaces      */
  --palette-night-500: #96938E;  /* muted text: >= 4.6:1 on dark surfaces       */
  --palette-night-600: #CAC7C2;  /* secondary text on dark                      */

  /* ------------------------------------------------------------------------
     1.3 Brand (tenant-overridable). Gold family is hue-locked to #B0894A
     (OKLCH h 77.9). Brand gold FAILS text contrast on ivory (2.95:1) and on
     white (3.22:1) — so text/links on light use --brand-accent-strong.
     ------------------------------------------------------------------------ */
  --brand-canvas:              #F7F5F0;  /* warm ivory                                   */
  --brand-ink:                 #191817;  /* primary text                                 */
  --brand-charcoal:            #0B0B0D;  /* deepest surface                              */
  --brand-accent-wash:         #FCF2E3;  /* gold-50: selected card / row tint on light   */
  --brand-accent-wash-2:       #F7E5CB;  /* gold-100: hover on wash                      */
  --brand-accent-hover-light:  #ECD0A5;  /* gold-200: hover of light-gold fill on dark   */
  --brand-accent-light:        #D8B880;  /* gold-300 BRAND light gold: text/accents on dark (10.38:1 on charcoal) */
  --brand-accent:              #B0894A;  /* gold-500 BRAND gold: fills with dark text, accents on dark */
  --brand-accent-ui:           #A88243;  /* gold-600: non-text UI on light (>= 3:1)      */
  --brand-accent-strong:       #7E5915;  /* gold-700 TEXT-SAFE gold: >= 5:1 on light surfaces */
  --brand-accent-stronger:     #664502;  /* gold-800: hover/pressed for text-safe gold (>= 7:1) */
  --brand-accent-wash-dark:    #2F2311;  /* selected surface in dark theme               */

  /* ------------------------------------------------------------------------
     1.4 Status hues (product-wide, not tenant-specific)
     text   = on light surfaces and on its own bg   (>= 5.2:1 target)
     border = non-text UI on light                  (>= 3:1)
     solid  = filled background carrying white text (>= 5:1)
     *-dark = equivalents for the dark theme
     ------------------------------------------------------------------------ */
  --palette-info-bg:        #E9F4FE;  --palette-info-text:        #166196;
  --palette-info-border:    #488EC5;  --palette-info-solid:       #2D74AB;
  --palette-info-bg-dark:   #12283B;  --palette-info-text-dark:   #73A9D6;
  --palette-info-border-dark: #2C74AA;

  --palette-success-bg:     #E2FAE7;  --palette-success-text:     #1A6B3A;
  --palette-success-border: #4C9763;  --palette-success-solid:    #307D4B;
  --palette-success-bg-dark: #0D2E18; --palette-success-text-dark: #78B387;
  --palette-success-border-dark: #317F4C;

  --palette-warning-bg:     #FEEFE3;  --palette-warning-text:     #8C4E01;
  --palette-warning-border: #BE7834;  --palette-warning-solid:    #A25F12;
  --palette-warning-bg-dark: #3B1F02; --palette-warning-text-dark: #D19764;
  --palette-warning-border-dark: #A25F12;

  --palette-danger-bg:      #FFEEEC;  --palette-danger-text:      #AB312C;
  --palette-danger-border:  #DF6056;  --palette-danger-solid:     #C1453E;
  --palette-danger-bg-dark: #3B1D19;  --palette-danger-text-dark: #ED867B;
  --palette-danger-border-dark: #C0443D;

  /* Focus: one blue hue, distinct from every brand and status colour so the
     keyboard indicator is never mistaken for "selected" or "gold accent". */
  --palette-focus:       #2E62C9;  /* >= 4.5:1 on all light surfaces, 3.47:1 on charcoal */
  --palette-focus-dark:  #91B8FE;  /* >= 7:1 on all dark surfaces                        */
}


/* ==========================================================================
   2. FOUNDATION TOKENS  (theme-independent)
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- 2.1 Type families
     Newsreader (Production Type, OFL-1.1) — editorial serif, public headings.
     Inter (Rasmus Andersson, OFL-1.1)      — UI + body text, both products.   */
  --font-family-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style",
                         "Palatino Linotype", Palatino, Georgia, serif;
  --font-family-sans:    "Inter", "Inter Fallback", system-ui, -apple-system,
                         "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* NEON: handwritten words (Build · Invest · Help · Repeat, Brian's signature); static/fonts/fonts.css. */
  --font-family-script:  "Mr Dafoe", "Brush Script MT", cursive;
  --font-family-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                         "Liberation Mono", monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;   /* Inter only; use sparingly (numbers, alerts) */
  --font-weight-display:  500;   /* Newsreader headings                          */
  --font-weight-display-strong: 600;

  /* Numbers in tables, prices, counts, dates: fixed-width digits (Inter tnum). */
  --font-numeric-tabular: tabular-nums;

  /* ---------------------------------------------------------------- 2.2 Line height & tracking */
  --leading-none:    1;
  --leading-display: 1.08;   /* hero / h1 serif                  */
  --leading-heading: 1.2;    /* h2–h4                            */
  --leading-snug:    1.35;   /* card titles, dense UI labels     */
  --leading-ui:      1.45;   /* CRM body, tables                 */
  --leading-body:    1.6;    /* public long-form body            */

  --tracking-display: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-normal:  0;
  --tracking-caps:    0.08em;   /* uppercase eyebrows / overlines (never below 14px) */

  --measure-narrow: 45ch;
  --measure-prose:  66ch;
  --measure-wide:   80ch;

  /* ---------------------------------------------------------------- 2.3 Spacing (4px base, rem so it honours user font size) */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  0.125rem;  /*   2px */
  --space-1:    0.25rem;   /*   4px */
  --space-1-5:  0.375rem;  /*   6px */
  --space-2:    0.5rem;    /*   8px */
  --space-3:    0.75rem;   /*  12px */
  --space-4:    1rem;      /*  16px */
  --space-5:    1.25rem;   /*  20px */
  --space-6:    1.5rem;    /*  24px */
  --space-8:    2rem;      /*  32px */
  --space-10:   2.5rem;    /*  40px */
  --space-12:   3rem;      /*  48px */
  --space-16:   4rem;      /*  64px */
  --space-20:   5rem;      /*  80px */
  --space-24:   6rem;      /*  96px */
  --space-32:   8rem;      /* 128px */

  /* ---------------------------------------------------------------- 2.4 Radii (primitive steps) */
  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    6px;
  --radius-4:    8px;
  --radius-5:    12px;
  --radius-6:    16px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------- 2.5 Borders */
  --border-width:        1px;
  --border-width-strong: 2px;
  --border-width-accent: 3px;   /* selected-card rule, active nav indicator */

  /* ---------------------------------------------------------------- 2.6 Focus geometry (colour is per theme) */
  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-halo-extra:  2px;     /* extra halo beyond the ring for photo/mixed backgrounds */

  /* ---------------------------------------------------------------- 2.7 Motion
     Restrained: short, decelerating, small distances. Collapsed to zero
     movement under prefers-reduced-motion (section 7.1) — except the
     landing-page scroll reveal, which an owner decision keeps (see
     --motion-duration-landing-reveal below).                               */
  --motion-duration-instant: 0ms;
  --motion-duration-fast:    120ms;  /* hover, press, colour changes         */
  --motion-duration-base:    180ms;  /* menus, tabs, toasts in               */
  --motion-duration-slow:    260ms;  /* drawers, modals                      */
  --motion-duration-reveal:  420ms;  /* CRM startup screen exit; 0 under reduced motion */
  --motion-duration-fade:    150ms;  /* opacity-only; kept under reduced motion */

  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter:    cubic-bezier(0, 0, 0.2, 1);   /* decelerate */
  --motion-ease-exit:     cubic-bezier(0.4, 0, 1, 1);   /* accelerate */

  --motion-distance-sm: 4px;
  --motion-distance-md: 12px;
  /* Landing-page scroll reveal. Both values are deliberately NOT reset under
     prefers-reduced-motion below: the owner chose (2026-10-01) to show the reveal to
     every visitor, including those who turned on Reduce Motion. This is an exception to
     WCAG 2.3.3's advice, scoped to .reveal only — --motion-duration-reveal, which the CRM
     startup screen uses, still collapses to 0ms. */
  --motion-distance-reveal: 56px;
  --motion-duration-landing-reveal: 650ms;  /* slowed from 420ms so the rise is easy to see */
  /* Landing hero intro on page load: the photo fades in, then the eyebrow, headline,
     lead, buttons, caption and goals bar rise in one after another. Slower than the
     section reveal on purpose (owner's request). Same owner decision as above: not
     reset under prefers-reduced-motion. Step × 5 items + start + intro ≈ 2.3s total. */
  --motion-duration-landing-photo: 1100ms;
  --motion-duration-landing-intro: 900ms;
  --motion-landing-intro-start: 550ms;   /* lettering starts once the photo is half in */
  --motion-landing-intro-step: 160ms;    /* gap between one line of lettering and the next */
  --motion-distance-landing-intro: 32px;
  /* While the hero photo is still downloading the intro waits for it — but never longer than this,
     so the lettering is not held back on a slow connection. Read by static/js/core/page.js. */
  --motion-landing-photo-wait: 1200ms;
  /* Piece-by-piece reveal (.reveal--stagger, e.g. the featured homes): each piece that comes into
     view waits this long after the previous one, so the heading arrives first, then the houses one
     by one. Read by static/js/core/page.js. Pieces rise by --motion-distance-landing-intro over
     --motion-duration-landing-intro, like the hero lettering. */
  --motion-landing-stagger-step: 180ms;
  /* Hover zoom on house photos and portraits: the picture grows slowly inside its frame. Same owner
     decision: not reset under prefers-reduced-motion. */
  --motion-duration-hover-zoom: 700ms;
  --motion-scale-hover: 1.06;
  --motion-scale-from:  0.98;       /* dialogs scale in from here      */
  --motion-skeleton-duration: 1.6s; /* shimmer period (stops if reduced) */

  /* ---------------------------------------------------------------- 2.8 Layering */
  --z-base:      0;
  --z-raised:    1;
  --z-sticky:    100;   /* sticky table headers, filter bars */
  --z-header:    200;   /* site header / app top bar         */
  --z-dropdown:  300;   /* menus, selects, popovers          */
  --z-overlay:   400;   /* modal / drawer backdrop           */
  --z-drawer:    500;
  --z-modal:     600;
  --z-toast:     700;
  --z-tooltip:   800;
  --z-skip-link: 900;

  /* ---------------------------------------------------------------- 2.9 Breakpoints (reference only)
     Use in @media as literal em values so they respect browser zoom:
       sm  >= 40em  (640px)   large phones / small tablets portrait
       md  >= 48em  (768px)   tablets
       lg  >= 64em  (1024px)  small laptops, tablet landscape
       xl  >= 80em  (1280px)  desktop
       2xl >= 96em  (1536px)  wide desktop
     If PostCSS custom-media is adopted:
       @custom-media --bp-md (min-width: 48em);                             */
  --bp-sm:  40em;
  --bp-md:  48em;
  --bp-lg:  64em;
  --bp-xl:  80em;
  --bp-2xl: 96em;

  /* ---------------------------------------------------------------- 2.10 Sizes */
  --icon-size-sm: 1rem;       /* 16px */
  --icon-size-md: 1.25rem;    /* 20px */
  --icon-size-lg: 1.5rem;     /* 24px */
  --tap-target-min: 2.75rem;  /* 44px on touch (WCAG 2.5.8 AA floor is 24px) */
  --avatar-size-sm: 1.75rem;
  --avatar-size-md: 2.25rem;
  --avatar-size-lg: 4rem;
}


/* ==========================================================================
   3. SEMANTIC COLOUR — LIGHT THEME (default)
   ========================================================================== */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces ---- */
  --color-bg:               var(--brand-canvas);        /* page canvas (ivory)           */
  --color-bg-subtle:        var(--palette-stone-100);   /* alternate band / app sidebar  */
  --color-surface:          var(--palette-stone-0);     /* cards, panels, inputs         */
  --color-surface-raised:   var(--palette-stone-0);     /* menus, dialogs (+ shadow)     */
  --color-surface-sunken:   var(--palette-stone-100);   /* wells, table header           */
  --color-surface-hover:    var(--palette-stone-100);
  --color-surface-pressed:  var(--palette-stone-150);
  --color-surface-selected: var(--brand-accent-wash);   /* selected row / radio-card     */
  --color-surface-selected-hover: var(--brand-accent-wash-2);
  --color-surface-inverse:  var(--palette-stone-900);   /* tooltips, closed badge        */
  --color-overlay:          rgb(11 11 13 / 0.55);       /* modal backdrop                */
  --color-scrim:            rgb(11 11 13 / 0.62);       /* text-on-photo protection: ivory text stays >= 5.1:1 even over pure white */
  --color-skeleton:         var(--palette-stone-150);
  --color-skeleton-shine:   var(--palette-stone-100);

  /* ---- Text ---- */
  --color-text:           var(--brand-ink);             /* 16.3:1 on ivory */
  --color-text-secondary: var(--palette-stone-600);
  --color-text-muted:     var(--palette-stone-500);     /* minimum for any readable text */
  --color-text-disabled:  var(--palette-stone-400);     /* disabled only (exempt from 1.4.3) */
  --color-text-inverse:   var(--brand-canvas);
  --color-text-accent:    var(--brand-accent-strong);   /* eyebrows, small gold text */
  --color-link:           var(--brand-accent-strong);
  --color-link-hover:     var(--brand-accent-stronger);

  /* ---- Borders ---- */
  --color-border-subtle:   var(--palette-stone-200);    /* dividers (decorative)       */
  --color-border:          var(--palette-stone-300);    /* card outlines (decorative)  */
  --color-border-strong:   var(--palette-stone-400);    /* inputs, checkboxes: >= 3:1  */
  --color-border-accent:   var(--brand-accent-ui);      /* selected / active: >= 3:1   */
  --color-rule-decorative: var(--brand-accent);         /* thin gold rules, ornaments (decorative only on light) */

  /* ---- Actions ---- */
  --color-primary-bg:        var(--brand-charcoal);     /* "Submit", "Save", main CTA on light */
  --color-primary-bg-hover:  var(--palette-stone-800);
  --color-primary-bg-active: var(--palette-stone-700);
  --color-primary-text:      var(--brand-canvas);       /* 18.05:1 */

  --color-accent-bg:         var(--brand-accent);       /* gold CTA ("Get Started") — DARK text only */
  --color-accent-bg-hover:   var(--brand-accent-light);
  --color-accent-text:       var(--brand-charcoal);     /* 6.11:1 on gold; white would be 3.22:1 (fail) */

  --color-secondary-bg:       transparent;
  --color-secondary-bg-hover: var(--palette-stone-100);
  --color-secondary-border:   var(--palette-stone-900);
  --color-secondary-text:     var(--brand-ink);

  --color-ghost-bg-hover:     var(--palette-stone-100);
  --color-ghost-text:         var(--brand-ink);

  --color-control-checked-bg:   var(--brand-accent-strong);  /* checkbox/radio fill: 5.46:1 vs ivory */
  --color-control-checked-mark: var(--palette-stone-0);      /* 6.31:1 on the fill               */

  /* ---- Status ---- */
  --color-info-bg:     var(--palette-info-bg);     --color-info-text:     var(--palette-info-text);
  --color-info-border: var(--palette-info-border); --color-info-solid:    var(--palette-info-solid);
  --color-success-bg:     var(--palette-success-bg);     --color-success-text:  var(--palette-success-text);
  --color-success-border: var(--palette-success-border); --color-success-solid: var(--palette-success-solid);
  --color-warning-bg:     var(--palette-warning-bg);     --color-warning-text:  var(--palette-warning-text);
  --color-warning-border: var(--palette-warning-border); --color-warning-solid: var(--palette-warning-solid);
  --color-danger-bg:      var(--palette-danger-bg);      --color-danger-text:   var(--palette-danger-text);
  --color-danger-border:  var(--palette-danger-border);  --color-danger-solid:  var(--palette-danger-solid);
  --color-danger-solid-hover: var(--palette-danger-text);
  --color-on-solid:       var(--palette-stone-0);        /* text on any *-solid fill */

  /* ---- Focus ---- */
  --color-focus:      var(--palette-focus);
  --color-focus-halo: var(--palette-stone-0);

  /* ---- Shadow ingredients (composites are in section 6) ---- */
  --shadow-rgb:     25 24 23;   /* ink-tinted, warm */
  --shadow-alpha-1: 0.06;
  --shadow-alpha-2: 0.09;
  --shadow-alpha-3: 0.14;

  /* ---- Lead-stage badges (text always >= 6:1 on its own bg) ---- */
  --stage-new-bg:             #E2F1FE;  --stage-new-text:             #105E92;
  --stage-assigned-bg:        #EBEDFE;  --stage-assigned-text:        #4D5397;
  --stage-attempting-bg:      #FFEAD9;  --stage-attempting-text:      #854A01;
  --stage-connected-bg:       #D7F6F7;  --stage-connected-text:       #026569;
  --stage-qualified-bg:       #DEF6E3;  --stage-qualified-text:       #21673A;
  --stage-appointment-bg:     #F8E8FB;  --stage-appointment-text:     #794581;
  --stage-negotiating-bg:     #FFECCF;  --stage-negotiating-text:     #775209;
  --stage-under-contract-bg:  #186B45;  --stage-under-contract-text:  #FFFFFF;  /* solid: 6.51:1 */
  --stage-closed-bg:          #191817;  --stage-closed-text:          #D8B880;  /* solid: 9.36:1 */
  --stage-lost-bg:            #F0ECE7;  --stage-lost-text:            #55524E;
  --stage-nurture-bg:         #ECF2D8;  --stage-nurture-text:         #555E26;
}


/* ==========================================================================
   4. SEMANTIC COLOUR — DARK THEME
   Applied by data-theme="dark" on any element, or data-theme="system" when
   the OS prefers dark. Keep the two blocks below IDENTICAL.
   (light-dark() would remove the duplication, but it only reached Baseline
   in May 2024 and an unsupported value would blank the whole token on older
   iPhones — revisit in 2027.)
   ========================================================================== */

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

  --color-bg:               var(--palette-night-0);
  --color-bg-subtle:        var(--palette-night-50);
  --color-surface:          var(--palette-night-100);
  --color-surface-raised:   var(--palette-night-150);
  --color-surface-sunken:   var(--palette-night-0);
  --color-surface-hover:    var(--palette-night-150);
  --color-surface-pressed:  var(--palette-night-200);
  --color-surface-selected: var(--brand-accent-wash-dark);
  --color-surface-selected-hover: var(--palette-night-200);
  --color-surface-inverse:  var(--brand-canvas);
  --color-overlay:          rgb(0 0 0 / 0.66);
  --color-scrim:            rgb(11 11 13 / 0.62);
  --color-skeleton:         var(--palette-night-150);
  --color-skeleton-shine:   var(--palette-night-200);

  --color-text:           var(--brand-canvas);
  --color-text-secondary: var(--palette-night-600);
  --color-text-muted:     var(--palette-night-500);
  --color-text-disabled:  var(--palette-night-400);
  --color-text-inverse:   var(--brand-ink);
  --color-text-accent:    var(--brand-accent-light);
  --color-link:           var(--brand-accent-light);
  --color-link-hover:     var(--brand-accent-hover-light);

  --color-border-subtle:   var(--palette-night-200);
  --color-border:          var(--palette-night-300);
  --color-border-strong:   var(--palette-night-400);
  --color-border-accent:   var(--brand-accent);
  --color-rule-decorative: var(--brand-accent);

  --color-primary-bg:        var(--brand-accent-light);     /* light gold CTA on charcoal */
  --color-primary-bg-hover:  var(--brand-accent-hover-light);
  --color-primary-bg-active: var(--brand-accent);
  --color-primary-text:      var(--brand-charcoal);         /* 10.38:1 */

  --color-accent-bg:         var(--brand-accent);
  --color-accent-bg-hover:   var(--brand-accent-light);
  --color-accent-text:       var(--brand-charcoal);

  --color-secondary-bg:       transparent;
  --color-secondary-bg-hover: var(--palette-night-150);
  --color-secondary-border:   var(--palette-night-600);
  --color-secondary-text:     var(--brand-canvas);

  --color-ghost-bg-hover:     var(--palette-night-150);
  --color-ghost-text:         var(--brand-canvas);

  --color-control-checked-bg:   var(--brand-accent-light);
  --color-control-checked-mark: var(--brand-charcoal);

  --color-info-bg:     var(--palette-info-bg-dark);     --color-info-text:     var(--palette-info-text-dark);
  --color-info-border: var(--palette-info-border-dark); --color-info-solid:    var(--palette-info-solid);
  --color-success-bg:     var(--palette-success-bg-dark);     --color-success-text:  var(--palette-success-text-dark);
  --color-success-border: var(--palette-success-border-dark); --color-success-solid: var(--palette-success-solid);
  --color-warning-bg:     var(--palette-warning-bg-dark);     --color-warning-text:  var(--palette-warning-text-dark);
  --color-warning-border: var(--palette-warning-border-dark); --color-warning-solid: var(--palette-warning-solid);
  --color-danger-bg:      var(--palette-danger-bg-dark);      --color-danger-text:   var(--palette-danger-text-dark);
  --color-danger-border:  var(--palette-danger-border-dark);  --color-danger-solid:  var(--palette-danger-solid);
  --color-danger-solid-hover: var(--palette-danger-text);
  --color-on-solid:       var(--palette-stone-0);

  --color-focus:      var(--palette-focus-dark);
  --color-focus-halo: var(--palette-night-0);

  --shadow-rgb:     0 0 0;
  --shadow-alpha-1: 0.35;
  --shadow-alpha-2: 0.45;
  --shadow-alpha-3: 0.55;

  --stage-new-bg:             #193043;  --stage-new-text:             #83B2DA;
  --stage-assigned-bg:        #282B44;  --stage-assigned-text:        #A0A8DD;
  --stage-attempting-bg:      #432608;  --stage-attempting-text:      #D0A27A;
  --stage-connected-bg:       #053537;  --stage-connected-text:       #7BB9BC;
  --stage-qualified-bg:       #173520;  --stage-qualified-text:       #8AB996;
  --stage-appointment-bg:     #38263B;  --stage-appointment-text:     #C59DCB;
  --stage-negotiating-bg:     #3E2903;  --stage-negotiating-text:     #C3A77D;
  --stage-under-contract-bg:  #186B45;  --stage-under-contract-text:  #FFFFFF;
  --stage-closed-bg:          #D8B880;  --stage-closed-text:          #0B0B0D;  /* inverted on dark: 10.38:1 */
  --stage-lost-bg:            #22201D;  --stage-lost-text:            #CAC7C2;
  --stage-nurture-bg:         #2B3110;  --stage-nurture-text:         #A8B189;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;

    --color-bg:               var(--palette-night-0);
    --color-bg-subtle:        var(--palette-night-50);
    --color-surface:          var(--palette-night-100);
    --color-surface-raised:   var(--palette-night-150);
    --color-surface-sunken:   var(--palette-night-0);
    --color-surface-hover:    var(--palette-night-150);
    --color-surface-pressed:  var(--palette-night-200);
    --color-surface-selected: var(--brand-accent-wash-dark);
    --color-surface-selected-hover: var(--palette-night-200);
    --color-surface-inverse:  var(--brand-canvas);
    --color-overlay:          rgb(0 0 0 / 0.66);
    --color-scrim:            rgb(11 11 13 / 0.62);
    --color-skeleton:         var(--palette-night-150);
    --color-skeleton-shine:   var(--palette-night-200);

    --color-text:           var(--brand-canvas);
    --color-text-secondary: var(--palette-night-600);
    --color-text-muted:     var(--palette-night-500);
    --color-text-disabled:  var(--palette-night-400);
    --color-text-inverse:   var(--brand-ink);
    --color-text-accent:    var(--brand-accent-light);
    --color-link:           var(--brand-accent-light);
    --color-link-hover:     var(--brand-accent-hover-light);

    --color-border-subtle:   var(--palette-night-200);
    --color-border:          var(--palette-night-300);
    --color-border-strong:   var(--palette-night-400);
    --color-border-accent:   var(--brand-accent);
    --color-rule-decorative: var(--brand-accent);

    --color-primary-bg:        var(--brand-accent-light);
    --color-primary-bg-hover:  var(--brand-accent-hover-light);
    --color-primary-bg-active: var(--brand-accent);
    --color-primary-text:      var(--brand-charcoal);

    --color-accent-bg:         var(--brand-accent);
    --color-accent-bg-hover:   var(--brand-accent-light);
    --color-accent-text:       var(--brand-charcoal);

    --color-secondary-bg:       transparent;
    --color-secondary-bg-hover: var(--palette-night-150);
    --color-secondary-border:   var(--palette-night-600);
    --color-secondary-text:     var(--brand-canvas);

    --color-ghost-bg-hover:     var(--palette-night-150);
    --color-ghost-text:         var(--brand-canvas);

    --color-control-checked-bg:   var(--brand-accent-light);
    --color-control-checked-mark: var(--brand-charcoal);

    --color-info-bg:     var(--palette-info-bg-dark);     --color-info-text:     var(--palette-info-text-dark);
    --color-info-border: var(--palette-info-border-dark); --color-info-solid:    var(--palette-info-solid);
    --color-success-bg:     var(--palette-success-bg-dark);     --color-success-text:  var(--palette-success-text-dark);
    --color-success-border: var(--palette-success-border-dark); --color-success-solid: var(--palette-success-solid);
    --color-warning-bg:     var(--palette-warning-bg-dark);     --color-warning-text:  var(--palette-warning-text-dark);
    --color-warning-border: var(--palette-warning-border-dark); --color-warning-solid: var(--palette-warning-solid);
    --color-danger-bg:      var(--palette-danger-bg-dark);      --color-danger-text:   var(--palette-danger-text-dark);
    --color-danger-border:  var(--palette-danger-border-dark);  --color-danger-solid:  var(--palette-danger-solid);
    --color-danger-solid-hover: var(--palette-danger-text);
    --color-on-solid:       var(--palette-stone-0);

    --color-focus:      var(--palette-focus-dark);
    --color-focus-halo: var(--palette-night-0);

    --shadow-rgb:     0 0 0;
    --shadow-alpha-1: 0.35;
    --shadow-alpha-2: 0.45;
    --shadow-alpha-3: 0.55;

    --stage-new-bg:             #193043;  --stage-new-text:             #83B2DA;
    --stage-assigned-bg:        #282B44;  --stage-assigned-text:        #A0A8DD;
    --stage-attempting-bg:      #432608;  --stage-attempting-text:      #D0A27A;
    --stage-connected-bg:       #053537;  --stage-connected-text:       #7BB9BC;
    --stage-qualified-bg:       #173520;  --stage-qualified-text:       #8AB996;
    --stage-appointment-bg:     #38263B;  --stage-appointment-text:     #C59DCB;
    --stage-negotiating-bg:     #3E2903;  --stage-negotiating-text:     #C3A77D;
    --stage-under-contract-bg:  #186B45;  --stage-under-contract-text:  #FFFFFF;
    --stage-closed-bg:          #D8B880;  --stage-closed-text:          #0B0B0D;
    --stage-lost-bg:            #22201D;  --stage-lost-text:            #CAC7C2;
    --stage-nurture-bg:         #2B3110;  --stage-nurture-text:         #A8B189;
  }
}


/* ==========================================================================
   5. PRODUCT SCALES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 PUBLIC WEBSITE (default) — editorial, generous, fluid.
   Fluid values interpolate between 360px and 1280px viewports. Every max is
   < 2.5x its min, so text still reaches 200% under browser zoom (WCAG 1.4.4).
   Smallest public text is 14px (legal/captions); body is 17–18px.
   -------------------------------------------------------------------------- */
:root,
[data-product="site"] {
  --text-xs:   0.875rem;                                          /* 14px  legal, captions, eyebrow */
  --text-sm:   0.9375rem;                                         /* 15px  helper text, meta        */
  --text-md:   1rem;                                              /* 16px  compact UI in site       */
  --text-base: clamp(1.0625rem, 1.038rem + 0.1087vw, 1.125rem);   /* 17→18 body                     */
  --text-lg:   clamp(1.1875rem, 1.139rem + 0.2174vw, 1.3125rem);  /* 19→21 lead paragraph           */
  --text-xl:   clamp(1.3125rem, 1.215rem + 0.4348vw, 1.5625rem);  /* 21→25 h4 / card title          */
  --text-2xl:  clamp(1.5625rem, 1.391rem + 0.7609vw, 2rem);       /* 25→32 h3                       */
  --text-3xl:  clamp(1.875rem, 1.533rem + 1.522vw, 2.75rem);      /* 30→44 h2 section title         */
  --text-4xl:  clamp(2.375rem, 1.837rem + 2.391vw, 3.75rem);      /* 38→60 h1 page title            */
  --text-5xl:  clamp(2.625rem, 1.891rem + 3.261vw, 4.5rem);       /* 42→72 hero display             */

  --leading-text: var(--leading-body);

  /* Layout */
  --container-max:   75rem;   /* 1200px content column */
  --container-wide:  90rem;   /* 1440px full-bleed grids, galleries */
  --container-prose: 42rem;   /* bios, legal pages */
  --page-gutter:     clamp(1.25rem, 0.5652rem + 3.043vw, 3rem);   /* 20→48 side padding */
  --section-space:   clamp(4rem, 2.63rem + 6.087vw, 7.5rem);      /* 64→120 between sections */
  --section-space-sm: clamp(2.5rem, 1.717rem + 3.478vw, 4.5rem);  /* 40→72 */
  --stack-lg:        clamp(2rem, 1.413rem + 2.609vw, 3.5rem);     /* 32→56 heading-to-content */
  --header-height:   4.5rem;  /* 72px */

  /* Components */
  --control-height-sm: 2.5rem;    /* 40px */
  --control-height:    3rem;      /* 48px — all public buttons/inputs */
  --control-height-lg: 3.5rem;    /* 56px — hero CTA, intent cards    */
  --control-padding-x: 1.5rem;
  --control-font-size: var(--text-base); /* 17–18px; never below 16px (stops iOS zoom-on-focus) */
  --control-gap:       var(--space-2);

  --radius-control: var(--radius-1);     /* crisp, architectural */
  --radius-card:    var(--radius-2);
  --radius-dialog:  var(--radius-4);
  --radius-badge:   var(--radius-1);
  --radius-media:   var(--radius-1);

  --card-padding:   clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  --badge-height:   1.75rem;
  --badge-font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   5.2 CRM APP — fast, calm, dense-but-readable. Fixed rem sizes.
   Base 15px; nothing below 13px; form fields 16px.
   -------------------------------------------------------------------------- */
[data-product="app"] {
  --text-xs:   0.8125rem;   /* 13px  FLOOR: timestamps, badges, table meta   */
  --text-sm:   0.875rem;    /* 14px  labels, secondary lines                 */
  --text-md:   1rem;        /* 16px  inputs, message threads, notes          */
  --text-base: 0.9375rem;   /* 15px  default body + table cells              */
  --text-lg:   1.125rem;    /* 18px  panel / card titles                     */
  --text-xl:   1.375rem;    /* 22px  page titles                             */
  --text-2xl:  1.75rem;     /* 28px  attention counts (sparingly)            */
  --text-3xl:  2rem;        /* 32px  empty-state headline (rare)             */
  --text-4xl:  2rem;        /* capped: no display type in the CRM            */
  --text-5xl:  2rem;

  --leading-text: var(--leading-ui);

  --container-max:    90rem;
  --container-prose:  42rem;
  --page-gutter:      clamp(1rem, 0.7rem + 1.2vw, 1.5rem);   /* 16→24 */
  --section-space:    var(--space-8);
  --section-space-sm: var(--space-6);
  --stack-lg:         var(--space-6);
  --header-height:    3.5rem;     /* 56px top bar          */
  --sidebar-width:    15rem;      /* 240px                 */
  --sidebar-width-collapsed: 4.5rem;
  --drawer-width:     min(36rem, 100vw);
  --bottom-nav-height: 4rem;      /* mobile tab bar        */

  --control-height-sm: 2rem;      /* 32px */
  --control-height:    2.5rem;    /* 40px */
  --control-height-lg: 2.75rem;   /* 44px */
  --control-padding-x: 0.875rem;
  --control-font-size: var(--text-md);
  --control-gap:       var(--space-2);

  --radius-control: var(--radius-3);
  --radius-card:    var(--radius-4);
  --radius-dialog:  var(--radius-5);
  --radius-badge:   var(--radius-full);
  --radius-media:   var(--radius-3);

  --card-padding:   var(--space-4);
  --badge-height:   1.5rem;       /* 24px */
  --badge-font-size: var(--text-xs);

  --table-row-height:   3rem;     /* 48px */
  --table-cell-padding-x: var(--space-3);
  --table-header-font-size: var(--text-sm);
}

/* 5.3 Compact density (CRM only). Text sizes do NOT shrink; only padding. */
[data-product="app"][data-density="compact"],
[data-product="app"] [data-density="compact"] {
  --control-height-sm: 1.75rem;   /* 28px — still above the 24px WCAG 2.5.8 floor */
  --control-height:    2.25rem;   /* 36px */
  --control-height-lg: 2.5rem;
  --card-padding:      var(--space-3);
  --table-row-height:  2.5rem;    /* 40px */
  --table-cell-padding-x: var(--space-2);
}

/* 5.4 Touch devices: controls grow to 44px regardless of density. */
@media (pointer: coarse) {
  [data-product="app"],
  [data-product="app"][data-density="compact"],
  [data-product="app"] [data-density="compact"] {
    --control-height-sm: 2.5rem;
    --control-height:    2.75rem;
    --control-height-lg: 3rem;
    --table-row-height:  3.25rem;
  }
}


/* ==========================================================================
   6. COMPOSITE / ALIAS TOKENS
   Re-declared on every scope root so var() references resolve against the
   local theme/product (see gotcha #4 at the top of this file).
   ========================================================================== */

:root,
[data-theme],
[data-product],
[data-density] {
  /* ---- Focus ring ----
     Use:  :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
     Over photos or mixed backgrounds, ALSO add box-shadow: var(--focus-ring-halo)
     which paints a contrasting band inside and outside the ring (two-tone).
     Outline (not box-shadow alone) keeps the ring visible in Windows forced-colours mode. */
  --focus-ring: var(--focus-ring-width) solid var(--color-focus);
  --focus-ring-halo: 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width) + var(--focus-halo-extra)) var(--color-focus-halo);

  /* ---- Elevation (restrained, warm-tinted) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgb(var(--shadow-rgb) / var(--shadow-alpha-1));
  --shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / var(--shadow-alpha-2)),
               0 1px 2px rgb(var(--shadow-rgb) / var(--shadow-alpha-1));        /* cards on hover        */
  --shadow-md: 0 6px 16px -4px rgb(var(--shadow-rgb) / var(--shadow-alpha-2)),
               0 2px 4px -2px rgb(var(--shadow-rgb) / var(--shadow-alpha-1));   /* menus, popovers, toasts */
  --shadow-lg: 0 18px 40px -12px rgb(var(--shadow-rgb) / var(--shadow-alpha-3)),
               0 4px 10px -4px rgb(var(--shadow-rgb) / var(--shadow-alpha-1));  /* modals, drawers        */

  /* ---- Typography composites ---- */
  --font-body: var(--font-weight-regular) var(--text-base) / var(--leading-text) var(--font-family-sans);

  /* ---- Message / communication status (§15 of the brief) ----
     Never style "simulated/unconfigured" like success: it must read as NOT SENT. */
  --msg-draft-bg:      transparent;                     --msg-draft-text:      var(--color-text-secondary);
  --msg-draft-border:  var(--color-border-strong);      --msg-draft-border-style: dashed;
  --msg-queued-bg:     var(--color-surface-sunken);     --msg-queued-text:     var(--color-text-secondary);
  --msg-queued-border: var(--color-border);             --msg-queued-border-style: solid;
  --msg-sent-bg:       var(--color-info-bg);            --msg-sent-text:       var(--color-info-text);
  --msg-sent-border:   transparent;                     --msg-sent-border-style: solid;
  --msg-delivered-bg:  var(--color-success-bg);         --msg-delivered-text:  var(--color-success-text);
  --msg-delivered-border: transparent;                  --msg-delivered-border-style: solid;
  --msg-failed-bg:     var(--color-danger-bg);          --msg-failed-text:     var(--color-danger-text);
  --msg-failed-border: var(--color-danger-border);      --msg-failed-border-style: solid;
  --msg-replied-bg:    var(--stage-appointment-bg);     --msg-replied-text:    var(--stage-appointment-text);
  --msg-replied-border: transparent;                    --msg-replied-border-style: solid;
  --msg-simulated-bg:  var(--color-warning-bg);         --msg-simulated-text:  var(--color-warning-text);
  --msg-simulated-border: var(--color-warning-border);  --msg-simulated-border-style: dashed;
}


/* ==========================================================================
   7. USER-PREFERENCE MEDIA QUERIES
   ========================================================================== */

/* 7.1 Reduced motion: remove movement, keep short opacity fades so state
   changes are still perceivable. One deliberate exception: the landing-page
   scroll reveal (--motion-duration-landing-reveal, --motion-distance-reveal)
   is not reset here — the owner chose on 2026-10-01 to show it to everyone. Components must read the distance/scale
   tokens (not hard-coded px) for this to work. Looping animations (skeleton
   shimmer, spinners) must also check this query and stop or slow down. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-base:   0ms;
    --motion-duration-slow:   0ms;
    --motion-duration-reveal: 0ms;
    --motion-distance-sm: 0px;
    --motion-distance-md: 0px;
    --motion-scale-from:  1;
    --motion-skeleton-duration: 0s;
    /* --motion-duration-fast and --motion-duration-fade intentionally kept:
       they drive colour/opacity only. */
  }
}

/* 7.2 Increased contrast: promote muted text and decorative borders. */
@media (prefers-contrast: more) {
  :root,
  [data-theme] {
    --color-text-muted:    var(--color-text-secondary);
    --color-border:        var(--color-border-strong);
    --color-border-subtle: var(--color-border-strong);
  }
}

/* 7.3 Forced colours (Windows High Contrast): the browser replaces colours.
   Components must: use outline for focus, give badges/buttons a
   1px transparent border (it becomes visible), and never rely on
   background colour alone to convey state. No token overrides needed. */

/* End of design-tokens.css */


/* ==========================================================================
   8. CRM APP THEME — navy + gold (UI-DARK-1, 2026-09-26)
   --------------------------------------------------------------------------
   Brian's dashboard mockup (docs/design-refs/crm-dashboard-mock.png; palette
   notes in docs/design-refs/crm-dashboard-palette.md): near-black navy canvas,
   navy panels with subtle borders, ivory text with blue-grey secondary text,
   antique gold for the brand, active navigation and eyebrows, electric blue
   for primary actions, links and chart bars, and green / orange / red /
   purple for stage columns, deltas and status chips.

   ADD-ONLY: sections 1–7 above are untouched. This section
     a) declares the new primitives (8.1),
     b) adds the app-only semantic tokens (charts, gold, chat bubbles, shell
        surfaces) with LIGHT values so every primitive also renders in the
        light theme (8.2),
     c) overrides the dark theme for the CRM only (8.3): the public website
        (data-product="site") keeps its charcoal inverse bands from section 4.
   Dark is the CRM default (templates/layouts/app.html); the light theme stays
   available through the same data-theme switch (User.ui_theme).
   Every text/background pair below was checked at WCAG 2.2 AA (4.5:1 text,
   3:1 UI) with the same formula as tests/a11y; the ratios are in the palette
   notes.
   ========================================================================== */

/* ---------------------------------------------------------------- 8.1 Primitives */
:root {
  /* Navy ladder (cool, hue ~215). Sampled from the mock and normalised. */
  --palette-navy-0:    #040C14;  /* header bar, deepest band                    */
  --palette-navy-50:   #071019;  /* page canvas                                 */
  --palette-navy-100:  #0B1622;  /* sidebar, sunken wells                       */
  --palette-navy-150:  #0F1A2B;  /* panels, cards, inputs                       */
  --palette-navy-200:  #182838;  /* raised (menus, dialogs), hover              */
  --palette-navy-250:  #1C2D40;  /* pressed                                     */
  --palette-navy-300:  #1E2C3D;  /* subtle dividers (decorative)                */
  --palette-navy-350:  #283848;  /* card borders (decorative)                   */
  --palette-navy-400:  #384858;  /* stronger decorative border                  */
  --palette-navy-500:  #607388;  /* STRONG border / disabled text: >= 3:1       */
  --palette-navy-600:  #93A0B4;  /* muted text: >= 5.6:1 on every navy surface  */
  --palette-navy-700:  #B8C2D2;  /* secondary text: >= 8.3:1                    */
  --palette-navy-800:  #F4F6FA;  /* primary text (cool white): >= 13.8:1        */

  /* Mock gold (antique, hue ~43). Text-safe on every navy surface (>= 6.7:1);
     NEVER text on a light surface (2.2:1 on white) — light uses --brand-accent-strong. */
  --palette-gold-300:  #E3BE63;  /* hover of gold text / light gold fill         */
  --palette-gold-400:  #D4AF5A;  /* BRAND gold on dark: wordmark, active nav, eyebrows */
  --palette-gold-500:  #B8943F;  /* gold fill with dark text                     */
  --palette-gold-wash-dark: #2B2512;  /* gold-tinted selected surface on navy     */

  /* Electric blue (mock buttons #0C6CFC, chart bars #2484FC). */
  --palette-blue-300:  #7DB6FF;  /* link hover on dark                           */
  --palette-blue-400:  #4D9BFF;  /* link text on dark: >= 5.3:1                  */
  --palette-blue-500:  #2484FC;  /* chart bars, focus-free accents (non-text)    */
  --palette-blue-600:  #0C6CFC;  /* primary button: white text 4.6:1             */
  --palette-blue-700:  #0A5FE0;  /* primary hover                                */
  --palette-blue-800:  #0958CC;  /* primary active                               */
  --palette-blue-wash-dark: #0F2A4A;  /* info / selected-blue surface             */

  /* Status hues tuned for navy (text >= 5.6:1 on its own bg and on panels). */
  --palette-info-bg-navy:      #0F2A4A;  --palette-info-text-navy:      #6FB1FF;
  --palette-info-border-navy:  #2F7BE0;  --palette-info-solid-navy:     #1E63C4;
  --palette-success-bg-navy:   #0F3325;  --palette-success-text-navy:   #4ADE80;
  --palette-success-border-navy: #1F9D55; --palette-success-solid-navy: #15803D;
  --palette-warning-bg-navy:   #3A2A0C;  --palette-warning-text-navy:   #F5B94A;
  --palette-warning-border-navy: #C97A0E; --palette-warning-solid-navy: #A25F12;
  --palette-danger-bg-navy:    #3B1A1F;  --palette-danger-text-navy:    #F87171;
  --palette-danger-border-navy: #D14343; --palette-danger-solid-navy:   #D14343;

  /* Chart series (dark): blue, gold, green, purple, orange, red, grey. All >= 3:1 on navy. */
  --palette-chart-blue:   #2484FC;
  --palette-chart-gold:   #D4AF5A;
  --palette-chart-green:  #3DD68C;
  --palette-chart-purple: #B48CFF;
  --palette-chart-orange: #F5A524;
  --palette-chart-red:    #F0625D;
  --palette-chart-grey:   #93A0B4;
}

/* ---------------------------------------------------------------- 8.2 App-only semantic tokens, LIGHT values
   Declared on every scope root so nested data-theme="light" panels (styleguide)
   resolve them locally. */
:root,
[data-theme="light"],
[data-product="app"] [data-theme="light"] {
  --color-text-accent-hover: var(--brand-accent-stronger);
  --color-accent-wash:       var(--brand-accent-wash);

  --color-shell-sidebar-bg:      var(--palette-stone-100);
  --color-shell-sidebar-border:  var(--palette-stone-200);
  --color-shell-topbar-bg:       var(--brand-canvas);
  --color-shell-nav-text:        var(--palette-stone-600);
  --color-shell-nav-hover-bg:    var(--palette-stone-150);
  --color-shell-nav-active-bg:   var(--palette-stone-0);
  --color-shell-nav-active-text: var(--brand-ink);
  --color-shell-nav-active-icon: var(--brand-accent-strong);
  --color-shell-brand-text:      var(--brand-ink);
  --color-shell-brand-sub:       var(--brand-accent-strong);

  --color-chart-1: #1D5FD1;   /* blue    */
  --color-chart-2: #7E5915;   /* gold (bronze on light) */
  --color-chart-3: #1A6B3A;   /* green   */
  --color-chart-4: #6D3FB8;   /* purple  */
  --color-chart-5: #A25F12;   /* orange  */
  --color-chart-6: #C1453E;   /* red     */
  --color-chart-7: #696561;   /* grey    */
  --color-chart-track: var(--palette-stone-150);
  --color-chart-grid:  var(--palette-stone-200);

  --color-delta-up:      var(--palette-success-text);
  --color-delta-up-bg:   var(--palette-success-bg);
  --color-delta-down:    var(--palette-danger-text);
  --color-delta-down-bg: var(--palette-danger-bg);
  --color-delta-flat:    var(--palette-stone-600);
  --color-delta-flat-bg: var(--palette-stone-100);

  --color-bubble-in-bg:    var(--palette-stone-100);
  --color-bubble-in-text:  var(--brand-ink);
  --color-bubble-out-bg:   #1D5FD1;
  --color-bubble-out-text: #FFFFFF;

  --color-kpi-icon-bg:   var(--brand-accent-wash);
  --color-kpi-icon-text: var(--brand-accent-strong);
}

/* ---------------------------------------------------------------- 8.3 CRM dark theme (navy + gold)
   Same token list as section 4, navy values; plus the app-only tokens of 8.2.
   (0,2,0) specificity beats section 4's (0,1,0). Keep the two blocks IDENTICAL
   (data-theme="dark" and data-theme="system" under a dark OS). */
[data-product="app"][data-theme="dark"],
[data-product="app"] [data-theme="dark"] {
  color-scheme: dark;

  --color-bg:               var(--palette-navy-50);
  --color-bg-subtle:        var(--palette-navy-100);
  --color-surface:          var(--palette-navy-150);
  --color-surface-raised:   var(--palette-navy-200);
  --color-surface-sunken:   var(--palette-navy-100);
  --color-surface-hover:    var(--palette-navy-200);
  --color-surface-pressed:  var(--palette-navy-250);
  --color-surface-selected: var(--palette-blue-wash-dark);
  --color-surface-selected-hover: var(--palette-navy-250);
  --color-surface-inverse:  var(--palette-navy-800);
  --color-overlay:          rgb(2 8 16 / 0.72);
  --color-scrim:            rgb(4 12 20 / 0.62);
  --color-skeleton:         var(--palette-navy-200);
  --color-skeleton-shine:   var(--palette-navy-250);

  --color-text:           var(--palette-navy-800);
  --color-text-secondary: var(--palette-navy-700);
  --color-text-muted:     var(--palette-navy-600);
  --color-text-disabled:  var(--palette-navy-500);
  --color-text-inverse:   var(--palette-navy-50);
  --color-text-accent:    var(--palette-gold-400);
  --color-link:           var(--palette-blue-400);
  --color-link-hover:     var(--palette-blue-300);

  --color-border-subtle:   var(--palette-navy-300);
  --color-border:          var(--palette-navy-350);
  --color-border-strong:   var(--palette-navy-500);
  --color-border-accent:   var(--palette-gold-400);
  --color-rule-decorative: var(--palette-gold-500);

  --color-primary-bg:        var(--palette-blue-600);    /* electric blue, white text 4.6:1 */
  --color-primary-bg-hover:  var(--palette-blue-700);
  --color-primary-bg-active: var(--palette-blue-800);
  --color-primary-text:      #FFFFFF;

  --color-accent-bg:         var(--palette-gold-400);    /* gold CTA, dark text 9.2:1 */
  --color-accent-bg-hover:   var(--palette-gold-300);
  --color-accent-text:       var(--palette-navy-50);

  --color-secondary-bg:       transparent;
  --color-secondary-bg-hover: var(--palette-navy-200);
  --color-secondary-border:   var(--palette-navy-500);
  --color-secondary-text:     var(--palette-navy-800);

  --color-ghost-bg-hover:     var(--palette-navy-200);
  --color-ghost-text:         var(--palette-navy-800);

  --color-control-checked-bg:   var(--palette-blue-600);
  --color-control-checked-mark: #FFFFFF;

  --color-info-bg:     var(--palette-info-bg-navy);     --color-info-text:     var(--palette-info-text-navy);
  --color-info-border: var(--palette-info-border-navy); --color-info-solid:    var(--palette-info-solid-navy);
  --color-success-bg:     var(--palette-success-bg-navy);     --color-success-text:  var(--palette-success-text-navy);
  --color-success-border: var(--palette-success-border-navy); --color-success-solid: var(--palette-success-solid-navy);
  --color-warning-bg:     var(--palette-warning-bg-navy);     --color-warning-text:  var(--palette-warning-text-navy);
  --color-warning-border: var(--palette-warning-border-navy); --color-warning-solid: var(--palette-warning-solid-navy);
  --color-danger-bg:      var(--palette-danger-bg-navy);      --color-danger-text:   var(--palette-danger-text-navy);
  --color-danger-border:  var(--palette-danger-border-navy);  --color-danger-solid:  var(--palette-danger-solid-navy);
  --color-danger-solid-hover: #B83232;
  --color-on-solid:       #FFFFFF;

  --color-focus:      var(--palette-focus-dark);
  --color-focus-halo: var(--palette-navy-50);

  --shadow-rgb:     0 0 0;
  --shadow-alpha-1: 0.35;
  --shadow-alpha-2: 0.45;
  --shadow-alpha-3: 0.6;

  /* Stage badges: solid fills like the mock's chips (white or navy text, all >= 4.5:1). */
  --stage-new-bg:             #0C6CFC;  --stage-new-text:             #FFFFFF;
  --stage-assigned-bg:        #4F46E5;  --stage-assigned-text:        #FFFFFF;
  --stage-attempting-bg:      #B45309;  --stage-attempting-text:      #FFFFFF;
  --stage-connected-bg:       #0E7490;  --stage-connected-text:       #FFFFFF;
  --stage-qualified-bg:       #15803D;  --stage-qualified-text:       #FFFFFF;
  --stage-appointment-bg:     #7E22CE;  --stage-appointment-text:     #FFFFFF;
  --stage-negotiating-bg:     #A16207;  --stage-negotiating-text:     #FFFFFF;
  --stage-under-contract-bg:  #166534;  --stage-under-contract-text:  #FFFFFF;
  --stage-closed-bg:          #D4AF5A;  --stage-closed-text:          #071019;
  --stage-lost-bg:            #334155;  --stage-lost-text:            #FFFFFF;
  --stage-nurture-bg:         #6D28D9;  --stage-nurture-text:         #FFFFFF;

  /* App-only tokens (8.2), dark values. */
  --color-text-accent-hover: var(--palette-gold-300);
  --color-accent-wash:       var(--palette-gold-wash-dark);

  --color-shell-sidebar-bg:      var(--palette-navy-100);
  --color-shell-sidebar-border:  var(--palette-navy-300);
  --color-shell-topbar-bg:       var(--palette-navy-0);
  --color-shell-nav-text:        var(--palette-navy-700);
  --color-shell-nav-hover-bg:    var(--palette-navy-200);
  --color-shell-nav-active-bg:   var(--palette-gold-wash-dark);
  --color-shell-nav-active-text: var(--palette-gold-400);
  --color-shell-nav-active-icon: var(--palette-gold-400);
  --color-shell-brand-text:      var(--palette-navy-800);
  --color-shell-brand-sub:       var(--palette-gold-400);

  --color-chart-1: var(--palette-chart-blue);
  --color-chart-2: var(--palette-chart-gold);
  --color-chart-3: var(--palette-chart-green);
  --color-chart-4: var(--palette-chart-purple);
  --color-chart-5: var(--palette-chart-orange);
  --color-chart-6: var(--palette-chart-red);
  --color-chart-7: var(--palette-chart-grey);
  --color-chart-track: var(--palette-navy-250);
  --color-chart-grid:  var(--palette-navy-300);

  --color-delta-up:      var(--palette-success-text-navy);
  --color-delta-up-bg:   var(--palette-success-bg-navy);
  --color-delta-down:    var(--palette-danger-text-navy);
  --color-delta-down-bg: var(--palette-danger-bg-navy);
  --color-delta-flat:    var(--palette-navy-700);
  --color-delta-flat-bg: var(--palette-navy-250);

  --color-bubble-in-bg:    var(--palette-navy-200);
  --color-bubble-in-text:  var(--palette-navy-800);
  --color-bubble-out-bg:   var(--palette-blue-600);
  --color-bubble-out-text: #FFFFFF;

  --color-kpi-icon-bg:   var(--palette-gold-wash-dark);
  --color-kpi-icon-text: var(--palette-gold-400);
}

@media (prefers-color-scheme: dark) {
  [data-product="app"][data-theme="system"],
  [data-product="app"] [data-theme="system"] {
    color-scheme: dark;

    --color-bg:               var(--palette-navy-50);
    --color-bg-subtle:        var(--palette-navy-100);
    --color-surface:          var(--palette-navy-150);
    --color-surface-raised:   var(--palette-navy-200);
    --color-surface-sunken:   var(--palette-navy-100);
    --color-surface-hover:    var(--palette-navy-200);
    --color-surface-pressed:  var(--palette-navy-250);
    --color-surface-selected: var(--palette-blue-wash-dark);
    --color-surface-selected-hover: var(--palette-navy-250);
    --color-surface-inverse:  var(--palette-navy-800);
    --color-overlay:          rgb(2 8 16 / 0.72);
    --color-scrim:            rgb(4 12 20 / 0.62);
    --color-skeleton:         var(--palette-navy-200);
    --color-skeleton-shine:   var(--palette-navy-250);

    --color-text:           var(--palette-navy-800);
    --color-text-secondary: var(--palette-navy-700);
    --color-text-muted:     var(--palette-navy-600);
    --color-text-disabled:  var(--palette-navy-500);
    --color-text-inverse:   var(--palette-navy-50);
    --color-text-accent:    var(--palette-gold-400);
    --color-link:           var(--palette-blue-400);
    --color-link-hover:     var(--palette-blue-300);

    --color-border-subtle:   var(--palette-navy-300);
    --color-border:          var(--palette-navy-350);
    --color-border-strong:   var(--palette-navy-500);
    --color-border-accent:   var(--palette-gold-400);
    --color-rule-decorative: var(--palette-gold-500);

    --color-primary-bg:        var(--palette-blue-600);
    --color-primary-bg-hover:  var(--palette-blue-700);
    --color-primary-bg-active: var(--palette-blue-800);
    --color-primary-text:      #FFFFFF;

    --color-accent-bg:         var(--palette-gold-400);
    --color-accent-bg-hover:   var(--palette-gold-300);
    --color-accent-text:       var(--palette-navy-50);

    --color-secondary-bg:       transparent;
    --color-secondary-bg-hover: var(--palette-navy-200);
    --color-secondary-border:   var(--palette-navy-500);
    --color-secondary-text:     var(--palette-navy-800);

    --color-ghost-bg-hover:     var(--palette-navy-200);
    --color-ghost-text:         var(--palette-navy-800);

    --color-control-checked-bg:   var(--palette-blue-600);
    --color-control-checked-mark: #FFFFFF;

    --color-info-bg:     var(--palette-info-bg-navy);     --color-info-text:     var(--palette-info-text-navy);
    --color-info-border: var(--palette-info-border-navy); --color-info-solid:    var(--palette-info-solid-navy);
    --color-success-bg:     var(--palette-success-bg-navy);     --color-success-text:  var(--palette-success-text-navy);
    --color-success-border: var(--palette-success-border-navy); --color-success-solid: var(--palette-success-solid-navy);
    --color-warning-bg:     var(--palette-warning-bg-navy);     --color-warning-text:  var(--palette-warning-text-navy);
    --color-warning-border: var(--palette-warning-border-navy); --color-warning-solid: var(--palette-warning-solid-navy);
    --color-danger-bg:      var(--palette-danger-bg-navy);      --color-danger-text:   var(--palette-danger-text-navy);
    --color-danger-border:  var(--palette-danger-border-navy);  --color-danger-solid:  var(--palette-danger-solid-navy);
    --color-danger-solid-hover: #B83232;
    --color-on-solid:       #FFFFFF;

    --color-focus:      var(--palette-focus-dark);
    --color-focus-halo: var(--palette-navy-50);

    --shadow-rgb:     0 0 0;
    --shadow-alpha-1: 0.35;
    --shadow-alpha-2: 0.45;
    --shadow-alpha-3: 0.6;

    --stage-new-bg:             #0C6CFC;  --stage-new-text:             #FFFFFF;
    --stage-assigned-bg:        #4F46E5;  --stage-assigned-text:        #FFFFFF;
    --stage-attempting-bg:      #B45309;  --stage-attempting-text:      #FFFFFF;
    --stage-connected-bg:       #0E7490;  --stage-connected-text:       #FFFFFF;
    --stage-qualified-bg:       #15803D;  --stage-qualified-text:       #FFFFFF;
    --stage-appointment-bg:     #7E22CE;  --stage-appointment-text:     #FFFFFF;
    --stage-negotiating-bg:     #A16207;  --stage-negotiating-text:     #FFFFFF;
    --stage-under-contract-bg:  #166534;  --stage-under-contract-text:  #FFFFFF;
    --stage-closed-bg:          #D4AF5A;  --stage-closed-text:          #071019;
    --stage-lost-bg:            #334155;  --stage-lost-text:            #FFFFFF;
    --stage-nurture-bg:         #6D28D9;  --stage-nurture-text:         #FFFFFF;

    --color-text-accent-hover: var(--palette-gold-300);
    --color-accent-wash:       var(--palette-gold-wash-dark);

    --color-shell-sidebar-bg:      var(--palette-navy-100);
    --color-shell-sidebar-border:  var(--palette-navy-300);
    --color-shell-topbar-bg:       var(--palette-navy-0);
    --color-shell-nav-text:        var(--palette-navy-700);
    --color-shell-nav-hover-bg:    var(--palette-navy-200);
    --color-shell-nav-active-bg:   var(--palette-gold-wash-dark);
    --color-shell-nav-active-text: var(--palette-gold-400);
    --color-shell-nav-active-icon: var(--palette-gold-400);
    --color-shell-brand-text:      var(--palette-navy-800);
    --color-shell-brand-sub:       var(--palette-gold-400);

    --color-chart-1: var(--palette-chart-blue);
    --color-chart-2: var(--palette-chart-gold);
    --color-chart-3: var(--palette-chart-green);
    --color-chart-4: var(--palette-chart-purple);
    --color-chart-5: var(--palette-chart-orange);
    --color-chart-6: var(--palette-chart-red);
    --color-chart-7: var(--palette-chart-grey);
    --color-chart-track: var(--palette-navy-250);
    --color-chart-grid:  var(--palette-navy-300);

    --color-delta-up:      var(--palette-success-text-navy);
    --color-delta-up-bg:   var(--palette-success-bg-navy);
    --color-delta-down:    var(--palette-danger-text-navy);
    --color-delta-down-bg: var(--palette-danger-bg-navy);
    --color-delta-flat:    var(--palette-navy-700);
    --color-delta-flat-bg: var(--palette-navy-250);

    --color-bubble-in-bg:    var(--palette-navy-200);
    --color-bubble-in-text:  var(--palette-navy-800);
    --color-bubble-out-bg:   var(--palette-blue-600);
    --color-bubble-out-text: #FFFFFF;

    --color-kpi-icon-bg:   var(--palette-gold-wash-dark);
    --color-kpi-icon-text: var(--palette-gold-400);
  }
}

/* 8.4 The composite/alias tokens of section 6 are re-declared on [data-theme]
   and [data-product] roots, so they already resolve against this theme. The
   message-status map there reads --color-info-* etc., which now carry the
   navy values inside the CRM. */

/* End of section 8 */


/* ==========================================================================
   8.5 Increased contrast for the CRM dark theme (UI-DARK-1 round 2)
   The 8.3 selectors (0,2,0) out-rank 7.2's `[data-theme]` (0,1,0), so the
   promotion of muted text and decorative borders is repeated here for them.
   Add-only; the values are the same as 7.2.
   ========================================================================== */
@media (prefers-contrast: more) {
  [data-product="app"][data-theme="dark"],
  [data-product="app"] [data-theme="dark"] {
    --color-text-muted:    var(--color-text-secondary);
    --color-border:        var(--color-border-strong);
    --color-border-subtle: var(--color-border-strong);
  }

  @media (prefers-color-scheme: dark) {
    [data-product="app"][data-theme="system"],
    [data-product="app"] [data-theme="system"] {
      --color-text-muted:    var(--color-text-secondary);
      --color-border:        var(--color-border-strong);
      --color-border-subtle: var(--color-border-strong);
    }
  }
}


/* ==========================================================================
   8.6 Dashboard startup intro (CODEX-FIX #15/#34)
   The first-visit welcome over the command center (apps/command/static/
   command/startup.css) is always a night sky, whatever the member's theme,
   so these are plain :root values. Every colour the sheet draws lives here;
   the sheet reads tokens only. Text pairs (on the bg; on the lighter glow):
   --color-startup-text 18.4:1 (14.4:1), --color-startup-text-muted 11.9:1
   (9.3:1), --color-startup-accent 10.6:1 (8.3:1) — WCAG 2.2 AA.
   ========================================================================== */
:root {
  --color-startup-bg:           #030810;  /* deep space                                 */
  --color-startup-glow:         #112439;  /* centre of the radial sky                   */
  --color-startup-haze:         #070E19;  /* mid band of the radial sky                 */
  --color-startup-text:         #F7F5F0;  /* ivory                                      */
  --color-startup-text-muted:   #CAC7C2;
  --color-startup-accent:         #D8B880;  /* light gold on dark (house mark, sub-label)  */
  --color-startup-rule:         #B0894A;  /* gold hairlines                             */
  --color-startup-accent-glow:    #B0894A45;
  --color-startup-track:        #D8B88035; /* progress track                            */
  --color-startup-nebula-warm:  #94703832;
  --color-startup-nebula-cool:  #3154742B;
  --color-startup-nebula-amber: #805C2926;
  --color-startup-shadow:       #00000099;
  --color-startup-skip-bg:      #07101CCC;
  --color-startup-skip-hover:   #263342;
  --color-startup-skip-border:  #D8B88077;

  /* Splash type: the only display sizes in the CRM, floors >= 16px. */
  --text-startup-name:     clamp(1.75rem, 1.2rem + 3vw, 3.2rem);   /* 28→51 */
  --text-startup-greeting: clamp(1.35rem, 1.1rem + 1.4vw, 2rem);   /* 22→32 */
  --text-startup-label:    clamp(1rem, 0.9rem + 0.6vw, 1.2rem);    /* 16→19 */

  --motion-startup-duration:       3.8s;   /* cinematic run (startup.js keeps the same) */
  --motion-startup-progress:       2.2s;
  --motion-startup-progress-delay: 1.6s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    /* startup.js never shows the intro under reduced motion; zeroed too as a second guard. */
    --motion-startup-duration:       0s;
    --motion-startup-progress:       0s;
    --motion-startup-progress-delay: 0s;
  }
}


/* ==========================================================================
   8.7 Team sign-in backdrop (static/css/login.css, static/js/login.js)
   A slow "data network" behind every team sign-in page: a faint blueprint
   grid, drifting nodes joined by hairlines, gold pulses running along the
   links, and a scan line. All decorative (no text), so no contrast pairs.
   The canvas reads these colours with getComputedStyle.
   Owner decision (2026-10-01): like the landing motion, it plays under
   Reduce Motion too; the page has its own "Pause motion" button instead
   (WCAG 2.2.2), and the choice is remembered in localStorage.
   ========================================================================== */
:root {
  --color-login-grid:       #8FB3D914;  /* blueprint grid lines                    */
  --color-login-node:       #9CC3E8;    /* network dots (alpha set by the canvas)  */
  --color-login-link:       #6F9CC8;    /* hairlines between dots                  */
  --color-login-pulse:      #D8B880;    /* gold data pulses                        */
  --color-login-scan:       #D8B88012;  /* scan line sweeping down                 */
  --color-login-vignette:   #05080DCC;  /* darkens the edges                       */
  --color-login-halo:       #B0894A26;  /* soft gold glow behind the card          */
  --color-login-caret:      #D8B880;    /* typing caret (a block, never text)      */

  --motion-login-bg-in:        1600ms;  /* grid + network fade in                  */
  --motion-login-brand-delay:  300ms;   /* the Gomez lockup appears                */
  --motion-login-card-delay:   700ms;   /* the card rises in                       */
  --motion-login-card-in:      1000ms;
  --motion-login-rule-delay:   1300ms;  /* gold top edge draws across              */
  --motion-login-rule-in:      900ms;
  --motion-login-decode-start: 1500ms;  /* "Welcome back" decodes (read by login.js) */
  --motion-login-decode:       1400ms;
  --motion-login-type-step:    55ms;    /* per letter of the subtitle (login.js)   */
  --motion-login-fields-start: 2900ms;  /* fields arrive one after another          */
  --motion-login-fields-step:  160ms;
  --motion-login-fields-in:    700ms;
  --motion-login-scan:         9s;      /* one scan-line sweep                      */
  --motion-login-grid-drift:   60s;     /* one grid cell of drift                   */
  --motion-login-caret-blink:  1s;
  --motion-login-distance:     14px;    /* fields and lockup rise this far          */
  --motion-login-scale-from:   0.985;   /* the card grows from here                 */
}


/* ==========================================================================
   8.8 Motion bands and the shared data network (CRM-MOTION, 2026-10-01)
   static/js/core/network.js draws the sign-in "data network" inside any
   [data-network] element; static/js/core/decode.js decodes / types a line.
   Inside the CRM the network lives only in contained "motion bands" (the
   dashboard and Today greeting, the settings page headers: components.css
   "Motion band"), never behind tables, forms or reading text. A band is
   always dark (data-theme="dark" on the band), so its text uses the CRM
   dark-theme text tokens and keeps their contrast in the light theme too.
   All colours below are decorative (no text), so no contrast pairs.
   Owner decision (2026-10-01), same as §8.7: the bands and the sign-in
   intro play under Reduce Motion too. Scope of that exception: the team
   sign-in pages (.auth-backdrop, .auth-intro--play) and the motion bands
   (.motion-band) only; every other CRM animation still stops. Each place
   has its own pause control (WCAG 2.2.2), remembered in localStorage
   (authMotionPaused on sign-in, crmMotionPaused in the CRM), and a member
   who picks Profile › Appearance › "Header animation: Still" gets a still
   picture with no animation at all (User.header_motion).
   ========================================================================== */
:root {
  --color-network-node:  var(--color-login-node);   /* dots (alpha set by the canvas) */
  --color-network-link:  var(--color-login-link);   /* hairlines between dots         */
  --color-network-pulse: var(--color-login-pulse);  /* data pulses and pointer links  */
  --color-band-grid:     #8FB3D912;  /* blueprint grid inside a band            */
  --color-band-halo:     #B0894A24;  /* soft glow behind the band's title       */

  --motion-band-in:            900ms;   /* the band's art fades in                 */
  --motion-band-rule-in:       900ms;   /* gold top edge draws across              */
  --motion-band-decode-start:  250ms;   /* greeting decodes (read by decode.js)    */
  --motion-band-decode:        1100ms;
  --motion-band-type-step:     40ms;
  --motion-band-fields-in:     700ms;   /* typed line's caret fades out            */
  --motion-band-caret-blink:   1s;
  --motion-band-grid-drift:    90s;     /* one grid cell of drift                  */
  --motion-band-beacon:        2.4s;    /* the live dot's pulse                    */
}


/* ==========================================================================
   8.9 Solis AI core (SOLIS-CORE: apps/assistant/static/assistant/solis-core.css,
   solis-core.js, templates/assistant/partials/solis_core.html)
   The animated "AI core" of the assistant: the Solis mark in a glowing orb,
   counter-rotating HUD rings, orbiting particles and gold data pulses running
   inward. Its stage is always a night-navy surface, whatever the member's
   theme (like 8.6), so these are plain :root values. Text pairs on
   --color-solis-surface (and on the lighter --color-solis-surface-glow):
   --color-solis-text 18.1:1 (14.6:1), --color-solis-text-muted 10.9:1
   (8.8:1), --color-solis-eyebrow 10.4:1 (8.4:1), --color-solis-standby-text
   9.3:1 (7.5:1) — WCAG 2.2 AA. Like §8.7–§8.8 it plays under Reduce Motion
   (owner decision; scope: the .solis-core loops only); its "Pause motion"
   button is the shared CRM pause (localStorage crmMotionPaused, §8.8), so
   pausing a band or the core pauses both; "Header animation: Still"
   (User.header_motion) shows a still core; it also stops off screen and in
   a hidden tab.
   ========================================================================== */
:root {
  --color-solis-surface:       #050B14;    /* the stage                           */
  --color-solis-surface-glow:  #10233A;    /* centre of the stage's radial sky    */
  --color-solis-border:        #D8B88038;  /* stage edge                          */
  --color-solis-grid:          #8FB3D912;  /* faint blueprint grid on the stage   */
  --color-solis-text:          #F7F5F0;    /* the name                            */
  --color-solis-text-muted:    #B6C2D1;    /* greeting line                       */
  --color-solis-eyebrow:       #D8B880;    /* mono status line                    */
  --color-solis-standby-text:  #A9B3C0;    /* status line on standby              */
  --color-solis-live:          #5FD08A;    /* "online" dot                        */
  --color-solis-standby-dot:   #E0B252;    /* "standby" dot                       */
  --color-solis-ring:          #6F9CC8;    /* HUD rings (opacity set by the sheet) */
  --color-solis-ring-accent:   #D8B880;    /* the arcs and ticks that catch light */
  --color-solis-spoke:         #6F9CC8;    /* radial lines to the core            */
  --color-solis-pulse:         #F2D59B;    /* data pulses running inward          */
  --color-solis-particle:      #9CC3E8;    /* orbiting particles                  */
  --color-solis-orb-hi:        #2A4A70;    /* orb highlight                       */
  --color-solis-orb:           #0D1D31;    /* orb body                            */
  --color-solis-orb-edge:      #040910;    /* orb rim                             */
  --color-solis-orb-rim:       #D8B88099;  /* orb outline                         */
  --color-solis-glow:          #D8B88066;  /* breathing glow                      */
  --color-solis-glow-soft:     #B0894A2E;  /* halo behind the orb                 */
  --color-solis-mark:          #F2D59B;    /* the sparkles in the middle          */
  --color-solis-standby:       #7C8696;    /* rings, mark and orb rim on standby  */
  --color-solis-standby-glow:  #7C869626;

  --motion-solis-intro:          1100ms;  /* the core fades and grows in (one-shot)  */
  --motion-solis-decode-start:   350ms;   /* the name decodes (read by solis-core.js) */
  --motion-solis-decode:         1400ms;
  --motion-solis-ring-outer:     72s;     /* one turn of each HUD ring               */
  --motion-solis-ring-middle:    46s;
  --motion-solis-ring-inner:     28s;
  --motion-solis-orbit-a:        16s;     /* one lap of each particle orbit          */
  --motion-solis-orbit-b:        23s;
  --motion-solis-orbit-c:        31s;
  --motion-solis-breathe:        5.6s;    /* one glow breath                         */
  --motion-solis-pulse:          8s;      /* one cycle of a spoke's data pulse       */
  --motion-solis-shimmer:        2.6s;    /* the top-bar launcher's one glint        */
  --motion-solis-standby-factor: 3;       /* standby rings turn this much slower     */
  --motion-solis-thinking-rate:  2.6;     /* thinking speeds every loop up this much (JS) */
  --motion-solis-rate-ramp:      700ms;   /* how long the speed change takes (JS)    */
}


/* ==========================================================================
   8.10 Neon Blue — the CRM look from Brian's 2026-10-02 picture (NEON)
   docs/design-refs/neon/dashboard-reference.png: near-black deep navy page,
   panels a step lighter with thin glowing blue borders and a soft outer
   glow, electric-blue primary, cyan accents, white text, multi-colour KPI
   icon chips and a blue filled active-navigation pill.
   Chosen per member (User.ui_look, Profile › Appearance › "CRM look");
   templates/layouts/app.html puts data-look="neon" on <html>. Gomez Classic
   (data-look="classic") is sections 8.1–8.9 untouched.
   Neon Blue is always dark: apps/core/context_processors.py renders
   data-theme="dark" under Neon whatever User.ui_theme says, so there is no
   light variant to keep in step. The same semantic token names as 8.3 are
   re-declared, so every component recolours without a template change; the
   selectors are (0,2,0) and come after 8.3/8.5, so they win.
   Text pairs (WCAG 2.2 AA; on bg / surface / raised / selected):
     --color-text #F5F8FF 18.6 / 17.3 / 15.9 / 14.1
     --color-text-secondary #C3D0E6 12.7 / 11.8 / 10.9 / 9.6
     --color-text-muted #93A6C6 8.0 / 7.4 / 6.9 / 6.1
     --color-text-accent (cyan) #22D3EE 10.9 / 10.2 / 9.4 / 8.3
     --color-link #4DA3FF 7.5 / 7.0 / 6.5 / 5.7
     primary button white on #1A6FF0 4.6 (hover #1764DD 5.4); active nav
     pill white on #1764DD 5.4; cyan CTA #04101F on #22D3EE 10.6
     status text on its own bg: info 7.5, success 8.8, warning 9.3, danger 6.0
   UI (3:1): strong border #5578AE 4.1 on surface, 3.8 on raised; KPI chips
   white icon on blue 4.6, violet 5.7, sky 4.1, orange 3.6, green 3.8,
   indigo 6.3; chart series on surface >= 5.5.
   ========================================================================== */
:root {
  --palette-neon-0:    #03070F;  /* top bar, deepest band               */
  --palette-neon-50:   #050A18;  /* page canvas                         */
  --palette-neon-100:  #070E20;  /* sidebar, sunken wells               */
  --palette-neon-150:  #0A1428;  /* panels, cards, inputs               */
  --palette-neon-200:  #0F1C36;  /* raised (menus, dialogs)             */
  --palette-neon-250:  #12223F;  /* hover / pressed                     */
  --palette-neon-300:  #13254A;  /* subtle dividers (decorative)        */
  --palette-neon-350:  #1B3563;  /* glowing panel borders (decorative)  */
  --palette-neon-500:  #5578AE;  /* STRONG border: >= 3:1               */
  --palette-neon-600:  #93A6C6;  /* muted text                          */
  --palette-neon-700:  #C3D0E6;  /* secondary text                      */
  --palette-neon-800:  #F5F8FF;  /* primary text                        */
  --palette-neon-blue:       #1A6FF0;  /* primary button               */
  --palette-neon-blue-hover: #1764DD;
  --palette-neon-blue-press: #1459C8;
  --palette-neon-electric:   #1E7BFF;  /* glows, rules, focus-free accents (non-text) */
  --palette-neon-cyan:       #22D3EE;  /* accent text and CTA          */
  --palette-neon-cyan-hover: #67E8F9;
  --palette-neon-link:       #4DA3FF;
  --palette-neon-link-hover: #8CC4FF;
  --palette-neon-selected:   #0B2552;
  --palette-neon-wash:       #0B2149;  /* blue-tinted selected surface */
}

[data-product="app"][data-look="neon"],
[data-look="neon"] [data-theme="dark"],
[data-look="neon"] [data-theme="system"] {
  color-scheme: dark;

  --color-bg:               var(--palette-neon-50);
  --color-bg-subtle:        var(--palette-neon-100);
  --color-surface:          var(--palette-neon-150);
  --color-surface-raised:   var(--palette-neon-200);
  --color-surface-sunken:   var(--palette-neon-100);
  --color-surface-hover:    var(--palette-neon-250);
  --color-surface-pressed:  var(--palette-neon-250);
  --color-surface-selected: var(--palette-neon-selected);
  --color-surface-selected-hover: var(--palette-neon-250);
  --color-surface-inverse:  var(--palette-neon-800);
  --color-overlay:          rgb(2 6 16 / 0.74);
  --color-scrim:            rgb(3 7 15 / 0.64);
  --color-skeleton:         var(--palette-neon-200);
  --color-skeleton-shine:   var(--palette-neon-250);

  --color-text:           var(--palette-neon-800);
  --color-text-secondary: var(--palette-neon-700);
  --color-text-muted:     var(--palette-neon-600);
  --color-text-disabled:  #5F7396;
  --color-text-inverse:   var(--palette-neon-50);
  --color-text-accent:    var(--palette-neon-cyan);
  --color-link:           var(--palette-neon-link);
  --color-link-hover:     var(--palette-neon-link-hover);

  --color-border-subtle:   var(--palette-neon-300);
  --color-border:          var(--palette-neon-350);
  --color-border-strong:   var(--palette-neon-500);
  --color-border-accent:   var(--palette-neon-electric);
  --color-rule-decorative: var(--palette-neon-electric);

  --color-primary-bg:        var(--palette-neon-blue);
  --color-primary-bg-hover:  var(--palette-neon-blue-hover);
  --color-primary-bg-active: var(--palette-neon-blue-press);
  --color-primary-text:      #FFFFFF;

  --color-accent-bg:         var(--palette-neon-cyan);
  --color-accent-bg-hover:   var(--palette-neon-cyan-hover);
  --color-accent-text:       #04101F;

  --color-secondary-bg:       transparent;
  --color-secondary-bg-hover: var(--palette-neon-250);
  --color-secondary-border:   var(--palette-neon-500);
  --color-secondary-text:     var(--palette-neon-800);

  --color-ghost-bg-hover:     var(--palette-neon-250);
  --color-ghost-text:         var(--palette-neon-800);

  --color-control-checked-bg:   var(--palette-neon-blue);
  --color-control-checked-mark: #FFFFFF;

  --color-info-bg:     var(--palette-neon-wash);  --color-info-text:     #6FB8FF;
  --color-info-border: #2F7BE0;                   --color-info-solid:    #1E63C4;
  --color-success-bg:     #0B2A22;  --color-success-text:  #4ADE80;
  --color-success-border: #1F9D55;  --color-success-solid: #15803D;
  --color-warning-bg:     #2E2209;  --color-warning-text:  #FBBF24;
  --color-warning-border: #C97A0E;  --color-warning-solid: #A25F12;
  --color-danger-bg:      #341420;  --color-danger-text:   #F87171;
  --color-danger-border:  #D14343;  --color-danger-solid:  #D14343;
  --color-danger-solid-hover: #B83232;
  --color-on-solid:       #FFFFFF;

  --color-focus:      var(--palette-focus-dark);
  --color-focus-halo: var(--palette-neon-50);

  --shadow-rgb:     0 0 0;
  --shadow-alpha-1: 0.4;
  --shadow-alpha-2: 0.5;
  --shadow-alpha-3: 0.65;

  --stage-new-bg:             #1A6FF0;  --stage-new-text:             #FFFFFF;
  --stage-assigned-bg:        #4F46E5;  --stage-assigned-text:        #FFFFFF;
  --stage-attempting-bg:      #B45309;  --stage-attempting-text:      #FFFFFF;
  --stage-connected-bg:       #0E7490;  --stage-connected-text:       #FFFFFF;
  --stage-qualified-bg:       #15803D;  --stage-qualified-text:       #FFFFFF;
  --stage-appointment-bg:     #7E22CE;  --stage-appointment-text:     #FFFFFF;
  --stage-negotiating-bg:     #A16207;  --stage-negotiating-text:     #FFFFFF;
  --stage-under-contract-bg:  #166534;  --stage-under-contract-text:  #FFFFFF;
  --stage-closed-bg:          #22D3EE;  --stage-closed-text:          #04101F;
  --stage-lost-bg:            #334155;  --stage-lost-text:            #FFFFFF;
  --stage-nurture-bg:         #6D28D9;  --stage-nurture-text:         #FFFFFF;

  --color-text-accent-hover: var(--palette-neon-cyan-hover);
  --color-accent-wash:       var(--palette-neon-wash);

  --color-shell-sidebar-bg:      var(--palette-neon-100);
  --color-shell-sidebar-border:  var(--palette-neon-300);
  --color-shell-topbar-bg:       var(--palette-neon-0);
  --color-shell-nav-text:        var(--palette-neon-700);
  --color-shell-nav-hover-bg:    var(--palette-neon-250);
  /* Active item like the reference picture: a dark navy pill with a glowing
     electric-blue edge (--shadow-neon-pill) and cyan text — 12.5:1 on #001437. */
  --color-shell-nav-active-bg:   #001437;
  --color-shell-nav-active-text: #67E8F9;
  --color-shell-nav-active-icon: #67E8F9;
  --color-shell-brand-text:      var(--palette-neon-800);
  --color-shell-brand-sub:       var(--palette-neon-700);

  --color-chart-1: #3B8BFF;  /* blue    */
  --color-chart-2: #A78BFA;  /* violet  */
  --color-chart-3: #22D3EE;  /* cyan    */
  --color-chart-4: #F472B6;  /* pink    */
  --color-chart-5: #FB923C;  /* orange  */
  --color-chart-6: #34D399;  /* green   */
  --color-chart-7: #94A3B8;  /* grey    */
  --color-chart-track: var(--palette-neon-250);
  --color-chart-grid:  var(--palette-neon-300);

  --color-delta-up:      #4ADE80;
  --color-delta-up-bg:   #0B2A22;
  --color-delta-down:    #F87171;
  --color-delta-down-bg: #341420;
  --color-delta-flat:    var(--palette-neon-700);
  --color-delta-flat-bg: var(--palette-neon-250);

  --color-bubble-in-bg:    var(--palette-neon-200);
  --color-bubble-in-text:  var(--palette-neon-800);
  --color-bubble-out-bg:   var(--palette-neon-blue);
  --color-bubble-out-text: #FFFFFF;

  --color-kpi-icon-bg:   var(--palette-neon-blue);
  --color-kpi-icon-text: #FFFFFF;

  /* Neon-only: glowing panel edges and the active pill's glow (neon.css). */
  --color-neon-edge:        #2A62C9;     /* panel border line (decorative)       */
  --color-neon-edge-hover:  #3F86FF;
  --color-neon-glow:        #1E7BFF40;   /* soft outer glow of a panel           */
  --color-neon-glow-strong: #1E7BFF8C;   /* active nav pill, focused hero        */
  --color-neon-sheen:       #8CC4FF14;   /* top-left light on a panel            */
  --color-neon-pill-edge:   var(--palette-neon-electric);  /* active nav pill outline   */
  /* Primary buttons glow electric blue (brighter on top, white text >= 4.6:1 at
     the lightest stop #1A6FF0, 5.7:1 at #0A5CE6), with a light top edge. */
  --color-neon-btn-top:       #1A6FF0;
  --color-neon-btn-bottom:    #0A5CE6;
  --color-neon-btn-highlight: #8CC4FF59;
  --shadow-neon-btn:       0 0 0 1px var(--palette-neon-electric), 0 0 18px -2px var(--color-neon-glow-strong), inset 0 1px 0 var(--color-neon-btn-highlight);
  --shadow-neon-btn-hover: 0 0 0 1px var(--color-neon-edge-hover), 0 0 26px 0 var(--color-neon-glow-strong), inset 0 1px 0 var(--color-neon-btn-highlight);
  /* Secondary buttons: the picture's outlined glowing pills (Search / Text / Call). */
  --color-neon-btn2-bg:   #001437;
  --color-neon-btn2-text: #67E8F9;
  --shadow-neon-panel:  0 0 0 1px var(--color-neon-edge), 0 0 18px -4px var(--color-neon-glow), inset 0 1px 0 var(--color-neon-sheen);
  --shadow-neon-hover:  0 0 0 1px var(--color-neon-edge-hover), 0 0 24px -2px var(--color-neon-glow);
  --shadow-neon-pill:   0 0 0 1px var(--palette-neon-electric), 0 0 16px 0 var(--color-neon-glow-strong);

  /* KPI icon chips: one colour per card, white icon (>= 3.5:1). */
  --color-kpi-chip-1: #1A6FF0;  /* blue    */
  --color-kpi-chip-2: #7C3AED;  /* violet  */
  --color-kpi-chip-3: #0284C7;  /* sky     */
  --color-kpi-chip-4: #EA580C;  /* orange  */
  --color-kpi-chip-5: #059669;  /* green   */
  --color-kpi-chip-6: #4F46E5;  /* indigo  */
  --color-kpi-chip-icon: #FFFFFF;
  /* Text badges (small text, >= 4.5:1 with white): deeper orange and green than the chips. */
  --color-neon-badge-deal:     #C2410C;  /* 5.2:1 */
  --color-neon-badge-property: #047857;  /* 5.5:1 */
}

@media (prefers-contrast: more) {
  [data-product="app"][data-look="neon"],
  [data-look="neon"] [data-theme="dark"],
  [data-look="neon"] [data-theme="system"] {
    --color-text-muted:    var(--color-text-secondary);
    --color-border:        var(--color-border-strong);
    --color-border-subtle: var(--color-border-strong);
  }
}

/* The always-dark motion surfaces of 8.6–8.9 under Neon: their gold pulses,
   rules and glows turn electric blue and cyan. Same names, plain values
   (decorative unless noted). Text pairs on --color-startup-bg: text 18.4:1,
   muted 11.9:1, accent #67E8F9 13.6:1; on --color-solis-surface: eyebrow
   #67E8F9 13.4:1. */
[data-look="neon"] {
  --color-startup-accent:       #67E8F9;
  --color-startup-rule:         #1E7BFF;
  --color-startup-accent-glow:  #1E7BFF45;
  --color-startup-track:        #67E8F935;
  --color-startup-nebula-warm:  #1E7BFF2E;
  --color-startup-nebula-amber: #7C3AED22;
  --color-startup-skip-border:  #67E8F977;

  --color-login-pulse:    #22D3EE;
  --color-login-scan:     #22D3EE12;
  --color-login-halo:     #1E7BFF2E;
  --color-login-caret:    #22D3EE;
  --color-login-link:     #3F7FD8;
  --color-login-node:     #8CC4FF;

  --color-band-halo:      #1E7BFF29;

  --color-solis-border:        #1E7BFF4D;
  --color-solis-eyebrow:       #67E8F9;
  --color-solis-ring-accent:   #22D3EE;
  --color-solis-pulse:         #8CE6FF;
  --color-solis-orb-rim:       #22D3EE99;
  --color-solis-glow:          #1E7BFF66;
  --color-solis-glow-soft:     #1E7BFF2E;
  --color-solis-mark:          #A5F3FC;
  --color-solis-surface:       #040917;
  --color-solis-surface-glow:  #0C2350;
}

/* 8.11 Neon 3D scenes (NEON): the Solis robot (apps/assistant/static/assistant/
   solis-robot.js) and the dashboard globe (apps/command/static/command/globe.js)
   read these with getComputedStyle. Decorative only (WebGL drawing, no text). */
:root {
  --color-robot-shell:       #EEF3FA;
  --color-robot-shell-shade: #9FB1C8;
  --color-robot-visor:       #03060D;
  --color-robot-joint:       #0B1220;
  --color-robot-eye:         #3DA9FF;
  --color-robot-eye-core:    #D7F1FF;
  --color-robot-glow:        #1E7BFF;
  --color-robot-accent:      #22D3EE;
  --color-robot-platform:    #071631;
  --color-robot-ring:        #2B8CFF;
  --color-robot-text:        #BFE3FF;
  --color-robot-zzz:         #8FB8E8;

  --color-globe-ocean:       #041029;
  --color-globe-land:        #1667F2;
  --color-globe-land-edge:   #6CC2FF;
  --color-globe-atmosphere:  #2F8BFF;
  --color-globe-lights:      #FFD7A0;
  --color-globe-orbit:       #4DA3FF;
  --color-globe-spark:       #CFF0FF;
  --color-globe-star:        #BFD8FF;
  --color-globe-beacon:      #22D3EE;

  --motion-solis-wave:       620ms;  /* the intro panel's sound-wave line while Solis talks */
}


/* ==========================================================================
   8.12 CRM page backdrop and the edge pause control (CRM-BACKDROP, 2026-10-02)
   The sign-in "data network" (§8.7) behind the main area of every CRM page
   (templates/layouts/app.html → templates/components/backdrop.html; drawn by
   static/js/core/network.js in its "backdrop" mode: blueprint grid with slow
   drift, drifting nodes with hairline links, gold pulses with landing rings,
   an occasional scan line and links to the mouse — all on ONE fixed canvas).
   Cards, panels and tables keep opaque surfaces; text that sits directly on
   the page (titles, subtitles, empty states) is cut out of the drawing with
   a margin, so no line ever runs behind words. All colours here are
   decorative (no text), so no contrast pairs; the control uses the ordinary
   surface/text tokens. Dark is the CRM's standard look (light hairlines on
   navy); the light theme gets darker hairlines at low alpha on ivory.
   Owner decision (§8.7–§8.9): it plays under Reduce Motion; the brake is the
   one pause control of the page (components/motion_control.html: hidden at
   the right edge until the mouse goes there or it has keyboard focus; a
   small tab on touch screens) and Profile › "Background animation: Still".
   --network-strength / --network-density scale the canvas (read by JS).
   ========================================================================== */
:root {
  --color-backdrop-grid:   #3D5A7A21;  /* blueprint grid on ivory                  */
  --color-backdrop-node:   #2F4D6E;    /* dots (alpha set by the canvas)           */
  --color-backdrop-link:   #3D5A7A;    /* hairlines between dots                   */
  --color-backdrop-pulse:  #9A7428;    /* deep gold pulses and landing rings       */
  --color-backdrop-scan:   #B0894A14;  /* the scan line                            */
  --color-backdrop-halo:   #B0894A12;  /* soft glow at the top of the main area    */
  --network-strength-backdrop: 1.05;   /* overall alpha on ivory                   */
  --network-density-backdrop:  1;      /* node count multiplier                    */

  --motion-backdrop-grid-drift: 60s;   /* one grid cell of drift                    */
  --motion-backdrop-scan:       9s;    /* one scan-line sweep                       */
  --motion-backdrop-scan-gap:   16s;   /* quiet time between two sweeps             */
  --motion-backdrop-fps:        40;    /* frame cap of the backdrop canvas (JS)     */
  --motion-edge-hide-delay:     900ms; /* the pause control hides after the mouse leaves */
  --size-edge-zone:             64px;  /* width of the right-edge zone that reveals it */
  --color-motion-edge-on:       var(--color-text-accent); /* the control while paused (gold accent in Classic) */
}

[data-product="app"][data-theme="dark"],
[data-product="app"] [data-theme="dark"] {
  --color-backdrop-grid:   #8FB3D91C;
  --color-backdrop-node:   var(--color-login-node);
  --color-backdrop-link:   var(--color-login-link);
  --color-backdrop-pulse:  var(--color-login-pulse);
  --color-backdrop-scan:   #D8B88017;
  --color-backdrop-halo:   #B0894A1C;
  --network-strength-backdrop: 1.4;
  --network-density-backdrop:  1.05;
}

@media (prefers-color-scheme: dark) {
  [data-product="app"][data-theme="system"],
  [data-product="app"] [data-theme="system"] {
    --color-backdrop-grid:   #8FB3D91C;
    --color-backdrop-node:   var(--color-login-node);
    --color-backdrop-link:   var(--color-login-link);
    --color-backdrop-pulse:  var(--color-login-pulse);
    --color-backdrop-scan:   #D8B88017;
    --color-backdrop-halo:   #B0894A1C;
    --network-strength-backdrop: 1.4;
    --network-density-backdrop:  1.05;
  }
}

/* 8.12 (cont.) Solis AI core, livelier (CRM-BACKDROP; solis-core.css, solis-core.js):
   an energy ripple from the core every few seconds, a slow second particle
   layer ("dust"), a light sweep across the orb, gold feeds carried in from
   the page backdrop, and reactions to the mouse and to typing. Decorative
   (no text); the stage is always night navy, so plain :root values. */
:root {
  --color-solis-ripple:       #D8B88070;  /* the energy ripple                       */
  --color-solis-sweep:        #F2D59B47;  /* light sweeping across the orb           */
  --color-solis-dust:         #9CC3E8;    /* the second particle layer               */
  --color-solis-glow-bright:  #E3BE63A6;  /* glow while the mouse is near or typing  */

  --motion-solis-ripple:      4.8s;   /* one ripple (two run, half a cycle apart)       */
  --motion-solis-sweep:       7s;     /* one turn of the light sweep                    */
  --motion-solis-dust:        120s;   /* one turn of the dust layer                     */
  --motion-solis-feed:        900ms;  /* a feed runs in along a spoke                    */
  --motion-solis-fed-hold:    600ms;  /* a landed feed keeps the glow bright this long (JS) */
  --motion-solis-near-rate:   1.3;    /* loops speed up this much with the mouse near (JS) */
  --motion-solis-typing-rate: 1.8;    /* ... and this much while the member types (JS)   */
  --motion-solis-typing-hold: 1200ms; /* typing counts until this long after the last key (JS) */
}

/* 8.12 (cont.) The page backdrop under Neon Blue (data-look="neon", §8.10): the
   same network in electric blue and cyan, never gold behind a Neon page. After
   the backdrop blocks above with the same specificity, so it wins. Decorative. */
[data-product="app"][data-look="neon"] {
  --color-backdrop-grid:   #4DA3FF1A;  /* blueprint grid                      */
  --color-backdrop-node:   #6CC2FF;    /* dots (alpha set by the canvas)      */
  --color-backdrop-link:   #2F8BFF;    /* hairlines between dots              */
  --color-backdrop-pulse:  #22D3EE;    /* cyan pulses and landing rings       */
  --color-backdrop-scan:   #22D3EE14;  /* the scan line                       */
  --color-backdrop-halo:   #1E7BFF24;  /* soft blue glow at the top           */
  --network-strength-backdrop: 1.3;
  --network-density-backdrop:  1.05;
  --color-motion-edge-on:  var(--palette-neon-cyan); /* the paused control: cyan, 9.4:1 on raised */
}