/* ============================================================================
   Pylon Solus design tokens — THE one file where raw color/font/size literals
   are allowed to exist. Every other stylesheet and every inline style in new
   code references these custom properties. This is what makes the next brand
   change a one-file edit instead of a 279-instance sweep (measured 2026-08-22:
   the old orange was hardcoded 279 times across 28 pages).

   Brand: the double-entry mark, ruled final 2026-08-22.
   Source of truth: 05_branches/pylon_solus/brand/logo_final_2026-08/ and the
   Taylor-approved platform mockups (mockups/2026-08-22_platform_rebuild/).

   Themes: .theme-dark is the admin's look, .theme-light is the client portal's.
   Both map the same semantic token names, so components are theme-blind.
   ========================================================================== */

:root {
  /* ---- brand primitives ---- */
  --brand-ink:    #0F1115;
  --brand-cobalt: #3B5BFF;
  --brand-cobalt-deep: #2A47E0;
  --brand-fog:    #F5F6F8;

  /* ---- status primitives ---- */
  --status-ok:      #3FB984;
  --status-warn:    #C68A1F;
  --status-warn-hi: #D9A441;   /* warn on dark backgrounds */
  --status-danger:  #E0574A;
  --status-neutral: #8A91A1;

  /* ---- type ---- */
  --font-sans: 'Familjen Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* ---- shape ---- */
  --radius-ctl:  7px;    /* buttons, inputs, nav items */
  --radius-card: 10px;
  --radius-stat: 9px;
  --radius-md:   8px;    /* dropdowns, notes */
  --radius-pill: 99px;

  /* ---- space scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* ---- component sizes ---- */
  --sidebar-w: 224px;
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --veil: rgba(0, 0, 0, 0.55);

  /* ---- interaction tints (cobalt at fixed alphas) ---- */
  --tint-cobalt-06: rgba(59, 91, 255, 0.06);
  --tint-cobalt-10: rgba(59, 91, 255, 0.10);
  --tint-cobalt-14: rgba(59, 91, 255, 0.14);

  /* ---- marketing site layer (css/style.css, the 28 public pages) -----------
     Added 2026-08-23 in the cobalt pivot. The public site had the old orange
     hardcoded 270 times and the old navy 42 times; every one of those now
     resolves through a name here. Semantic on purpose: a future palette move
     is an edit to these six lines, not another sweep. --------------------- */
  --site-accent:      var(--brand-cobalt);
  --site-accent-deep: var(--brand-cobalt-deep);
  --site-on-accent:   #FFFFFF;
  --site-ink:         var(--brand-ink);
  --site-paper:       var(--brand-fog);
  --site-focus-ring:  rgba(59, 91, 255, 0.45);  /* keyboard focus, 3px offset */
  --site-accent-glow: rgba(59, 91, 255, 0.45);  /* CTA lift shadow */
  --site-accent-fade: rgba(59, 91, 255, 0);     /* radial-gradient tail */
  --site-white:       #FFFFFF;
  --site-tint:        rgba(59, 91, 255, 0.06);  /* notice-box ground */
  --site-tint-line:   rgba(59, 91, 255, 0.28);  /* notice-box hairline */
  --site-on-dark-soft: rgba(245, 246, 248, 0.62); /* secondary text on an ink band */
  --site-shadow-pop:  0 18px 50px rgba(15, 17, 21, 0.26); /* floating panel over the page
     (the chat widget). Ink-tinted rather than pure black, and far lighter than
     --shadow-pop, which is tuned for the dark admin. Added 2026-08-24: the chat
     widget needed a lifted-panel shadow and there was no light-surface token for
     one, and inventing the literal in js/chat.js would have been exactly the
     279-instance mistake this file exists to prevent. */
  --site-accent-preinvert: #C4A400; /* the 255-complement of --brand-cobalt.
     Painted ONLY where the theme's backdrop-filter: invert(100%) will flip it
     back to true cobalt on screen (the fixed-header logo accent over a
     .mil-dark-bg hero). Never use it anywhere the invert does not reach. If
     --brand-cobalt ever changes, re-derive by hand: 255 minus each channel. */
}

/* ---------------------------------------------------------------------------
   Dark theme (the admin). Semantic tokens every component consumes.
   ------------------------------------------------------------------------- */
.theme-dark {
  --bg:            #0F1115;
  --bg-side:       #13151C;
  --surface:       #16181F;
  --surface-input: #1C1F27;
  --border:        #262A35;
  --border-soft:   #1E212A;
  --border-ghost:  #2E3340;

  --text:          #F5F6F8;
  --text-subtle:   #868D9E;
  --text-faint:    #5C6373;
  --text-ghost:    #A8AEBC;

  --accent:        var(--brand-cobalt);
  --accent-hover:  var(--brand-cobalt-deep);
  --on-accent:     #FFFFFF;

  --ok:      var(--status-ok);
  --warn:    var(--status-warn-hi);
  --danger:  var(--status-danger);
  --neutral: var(--status-neutral);

  --row-selected:  var(--tint-cobalt-14);
  --nav-active:    var(--tint-cobalt-14);
  --track:         #262A35;   /* progress-bar track */
}

/* ---------------------------------------------------------------------------
   Light theme (the client portal, and any light admin surface).
   ------------------------------------------------------------------------- */
.theme-light {
  --bg:            #F5F6F8;
  --bg-side:       #EAECF1;
  --surface:       #FFFFFF;
  --surface-input: #FFFFFF;
  --border:        #D8DCE4;
  --border-soft:   #E6E9EF;
  --border-ghost:  #D8DCE4;

  --text:          #0F1115;
  --text-subtle:   #6C7381;
  --text-faint:    #8A91A1;
  --text-ghost:    #5A6170;

  --accent:        var(--brand-cobalt);
  --accent-hover:  var(--brand-cobalt-deep);
  --on-accent:     #FFFFFF;

  --ok:      var(--status-ok);
  --warn:    var(--status-warn);
  --danger:  var(--status-danger);
  --neutral: var(--status-neutral);

  --row-selected:  rgba(59, 91, 255, 0.07);
  --nav-active:    var(--tint-cobalt-10);
  --track:         #E1E5EC;
}