/* ==========================================================================
   Portanus theme — PR1 of the console redesign (token/palette layer).

   Loaded AFTER Falcon's theme.css/user.css/custom.css, so these declarations
   win by source order (equal specificity to Falcon's [data-bs-theme=*] blocks).

   Strategy: define ONE reconciled token set (--pt-*), shared with the public
   marketing site, then REMAP the Falcon/Bootstrap variables (--pt-*, the
   renamed --bs-*) that every component reads. Recolor only — no layout change.
   Dark is the default; light is opt-in (data-bs-theme="light").

   Source of truth: the console mockup + memory `console-redesign-plan`.

   CHANGING THE BRAND COLOUR is a one-file edit: --pt-brand and its four
   siblings in each of the two blocks below, plus the two rgb triplets that
   can't be var()-indirected. Everything else — every Bootstrap component,
   every `xx-` console kit — reads those through var().

   That is only true because no template hardcodes the brand any more;
   `common/tests/test_theme_tokens.py` keeps it that way. Before 2026-08 the
   console kits carried the brand as raw hex in 59 files, and the first attempt
   at a palette change left the product visibly two-tone.

   Bump the `?v=` on portanus-theme.css in base/base.html AND
   two_factor/_base.html when you change a value here, or returning browsers
   keep the old palette from cache.
   ========================================================================== */

:root {
  /* ---- reconciled tokens · DARK (default), anchored on the landing brand ---- */
  --pt-canvas:#0a0f1e; --pt-surface:#131b30; --pt-surface-2:#1a2340;
  --pt-ink:#eaeef8; --pt-ink-2:#9aa5c0; --pt-ink-3:#66708c;
  --pt-line:#243050; --pt-line-2:#1b2340;
  --pt-brand:#48b1ad; --pt-brand-ink:#84cdca; --pt-brand-tint:#172c2b; --pt-brand-border:#264a48;
  --pt-accent:#f2a15a; --pt-accent-ink:#f6b681; --pt-accent-tint:#2c2011;
  --pt-teal:#5ad0e0;
  --pt-good:#57c76b; --pt-good-tint:#12261a;
  --pt-warn:#e0a94a; --pt-warn-tint:#2a2110;
  --pt-bad:#f0686a;  --pt-bad-tint:#2c1618;
  --pt-info:#48b1ad; --pt-info-tint:#172c2b;

  /* ---- remap Falcon/Bootstrap → our tokens (var-based ones resolve per theme) ---- */
  --pt-body-bg:var(--pt-canvas);
  --pt-body-color:var(--pt-ink-2);
  --pt-emphasis-color:var(--pt-ink);
  --pt-heading-color:var(--pt-ink);
  --pt-secondary-color:var(--pt-ink-2);
  --pt-tertiary-color:var(--pt-ink-3);
  --pt-secondary-bg:var(--pt-surface-2);
  --pt-tertiary-bg:var(--pt-surface-2);
  --pt-card-bg:var(--pt-surface);
  --pt-border-color:var(--pt-line);
  --pt-border-color-translucent:var(--pt-line);
  --pt-input-bg:var(--pt-surface);
  --pt-input-color:var(--pt-ink);
  --pt-input-border-color:var(--pt-line);
  --pt-link-color:var(--pt-brand-ink);
  --pt-link-hover-color:var(--pt-brand-ink);

  --pt-primary:var(--pt-brand);
  --pt-primary-bg-subtle:var(--pt-brand-tint);
  --pt-primary-text-emphasis:var(--pt-brand-ink);
  --pt-primary-border-subtle:var(--pt-brand-border);
  --pt-success:var(--pt-good); --pt-success-bg-subtle:var(--pt-good-tint); --pt-success-text-emphasis:var(--pt-good);
  --pt-warning:var(--pt-warn); --pt-warning-bg-subtle:var(--pt-warn-tint); --pt-warning-text-emphasis:var(--pt-warn);
  --pt-danger:var(--pt-bad);   --pt-danger-bg-subtle:var(--pt-bad-tint);   --pt-danger-text-emphasis:var(--pt-bad);
  --pt-info:var(--pt-info);    --pt-info-bg-subtle:var(--pt-info-tint);    --pt-info-text-emphasis:var(--pt-brand-ink);

  /* vertical sidebar */
  --pt-navbar-vertical-default-bg-color:var(--pt-surface);
  --pt-navbar-vertical-default-link-color:var(--pt-ink-2);
  --pt-navbar-vertical-default-link-hover-color:var(--pt-ink);
  --pt-navbar-vertical-default-link-active-color:var(--pt-brand-ink);

  /* rgb triplets can't be var()-indirected — DARK literals here, light overrides below */
  --pt-body-bg-rgb:10,15,30;
  --pt-body-color-rgb:154,165,192;
  --pt-emphasis-color-rgb:234,238,248;
  --pt-secondary-color-rgb:154,165,192;
  --pt-primary-rgb:72,177,173;
  --pt-success-rgb:87,199,107;
  --pt-warning-rgb:224,169,74;
  --pt-danger-rgb:240,104,106;
  --pt-info-rgb:72,177,173;
}

/* ---- LIGHT theme (opt-in): only the token values flip; the remaps above,
   resolving via var(), pick up these values automatically. ---- */
:root[data-bs-theme="light"] {
  --pt-canvas:#f6f8fb; --pt-surface:#ffffff; --pt-surface-2:#f1f4f9;
  --pt-ink:#0f1626; --pt-ink-2:#4a566b; --pt-ink-3:#8a93a6;
  --pt-line:#e5e9f0; --pt-line-2:#eef1f6;
  --pt-brand:#2f7471; --pt-brand-ink:#26605d; --pt-brand-tint:#e6f4f3; --pt-brand-border:#b9dedb;
  --pt-accent:#d97e2b; --pt-accent-ink:#b9631a; --pt-accent-tint:#fdefe0;
  --pt-teal:#1f8f9e;
  --pt-good:#2f9e44; --pt-good-tint:#e7f6ea;
  --pt-warn:#c77a12; --pt-warn-tint:#fbefd9;
  --pt-bad:#e03131;  --pt-bad-tint:#fcebeb;
  --pt-info:#2f7471; --pt-info-tint:#e6f4f3;

  --pt-body-bg-rgb:246,248,251;
  --pt-body-color-rgb:74,86,107;
  --pt-emphasis-color-rgb:15,22,38;
  --pt-secondary-color-rgb:74,86,107;
  --pt-primary-rgb:47,116,113;
  --pt-success-rgb:47,158,68;
  --pt-warning-rgb:199,122,18;
  --pt-danger-rgb:224,49,49;
  --pt-info-rgb:47,116,113;
}

/* ==========================================================================
   Targeted component nudges — where a bare var remap isn't enough.
   ========================================================================== */

/* Canvas + base surfaces (belt-and-suspenders on the body). */
body { background-color: var(--pt-canvas); }

/* Cards / dropdowns / the vertical nav read their bg from these; pin them so
   Falcon's baked light/dark values can't leak through. */
.card,
.dropdown-menu,
.navbar-vertical .navbar-collapse,
.navbar-vertical.navbar-card .navbar-collapse {
  background-color: var(--pt-surface);
  border-color: var(--pt-line);
}

/* Active vertical-nav item → brand tint + brand text (matches the mockup). */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link:active {
  color: var(--pt-brand-ink);
}

/* Primary buttons carry the brand teal (the amber accent is applied selectively later). */
.btn-primary {
  --pt-btn-bg: var(--pt-brand);
  --pt-btn-border-color: var(--pt-brand);
  --pt-btn-hover-bg: var(--pt-brand-ink);
  --pt-btn-hover-border-color: var(--pt-brand-ink);
  --pt-btn-active-bg: var(--pt-brand-ink);
  --pt-btn-color: #0a0f1e;
  --pt-btn-hover-color: #0a0f1e;
}

/* Native scrollbars on the dark canvas. */
:root:not([data-bs-theme="light"]) { scrollbar-color: var(--pt-line) transparent; }

/* ==========================================================================
   Extended foundation (console redesign PR6 — Falcon's theme.css is GONE).
   The stylesheet stack is now: portanus-bootstrap.min.css (stock Bootstrap
   5.3 with the variable prefix compiled as --pt-) + portanus-compat.css
   (the owned subset of layout/utility rules) + these definitions. Every
   variable a template or sheet references resolves HERE, per theme.
   ========================================================================== */

:root {
  /* Numbered gray ramp (Falcon-style semantics: 100 ≈ background wash,
     1100 ≈ strongest ink — the DARK theme ramp ascends toward light). */
  --pt-100: #1a2340; --pt-200: #243050; --pt-300: #2b3a5e; --pt-400: #3a4a72;
  --pt-500: #66708c; --pt-600: #9aa5c0; --pt-700: #b0b9d0; --pt-800: #c5cde0;
  --pt-900: #dfe4f0; --pt-1000: #eaeef8; --pt-1100: #f5f7fc;
  --pt-gray-100: var(--pt-100); --pt-gray-200: var(--pt-200);
  --pt-gray-300: var(--pt-300); --pt-gray-400: var(--pt-400);
  --pt-gray-500: var(--pt-500); --pt-gray-600: var(--pt-600);
  --pt-gray-700: var(--pt-700); --pt-gray-800: var(--pt-800);
  --pt-gray-900: var(--pt-900); --pt-gray-1000: var(--pt-1000);
  --pt-gray-1100: var(--pt-1100);

  /* Layout + type */
  --pt-top-nav-height: 3.5rem;
  --pt-font-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Surfaces the compat rules reference */
  --pt-quaternary-bg: var(--pt-surface-2);
  --pt-emphasis-bg: var(--pt-surface-2);
  --pt-body-tertiary-bg: var(--pt-surface-2);

  /* Bootstrap's bg-* utilities composite from the -rgb TRIPLETS (e.g.
     .bg-body-tertiary = rgba(var(--pt-tertiary-bg-rgb), opacity)), so the
     color vars alone aren't enough — without these, Bootstrap's own charcoal
     leaked into widget insets (dashboard Board/Trainer boxes). */
  --pt-secondary-bg-rgb: 26, 35, 64;
  --pt-tertiary-bg-rgb: 26, 35, 64;
  --pt-light: var(--pt-surface-2);
  --pt-light-rgb: 26, 35, 64;
  --pt-bg-navbar-glass: var(--pt-canvas);
  --pt-scrollbar-bg: var(--pt-line);
  --pt-soft-primary: var(--pt-brand-tint);
  --pt-dark: var(--pt-surface-2);

  /* Avatars */
  --pt-avatar-name-bg: #4f63c5;
  --pt-avatar-status-border-color: var(--pt-surface);
  --pt-avatar-button-bg: var(--pt-surface-2);
  --pt-avatar-button-hover-bg: var(--pt-line);

  /* btn-falcon-* family: surface buttons with a soft shadow + semantic ink. */
  --pt-btn-falcon-background: var(--pt-surface-2);
  --pt-btn-falcon-box-shadow: 0 0 0 1px rgba(0, 8, 19, .35), 0 2px 5px 0 rgba(0, 13, 33, .4);
  --pt-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(0, 8, 19, .35), 0 3px 7px 0 rgba(0, 13, 33, .6);
  --pt-btn-falcon-default-color: var(--pt-ink);
  --pt-btn-falcon-default-hover-color: var(--pt-ink);
  --pt-btn-falcon-default-active-color: var(--pt-brand-ink);
  --pt-btn-falcon-default-active-background: var(--pt-surface-2);
  --pt-btn-falcon-primary-color: var(--pt-brand-ink);
  --pt-btn-falcon-primary-hover-color: var(--pt-brand-ink);
  --pt-btn-falcon-primary-active-color: var(--pt-brand-ink);
  --pt-btn-falcon-primary-active-background: var(--pt-brand-tint);
  --pt-btn-falcon-success-color: var(--pt-good);
  --pt-btn-falcon-success-hover-color: var(--pt-good);
  --pt-btn-falcon-success-active-color: var(--pt-good);
  --pt-btn-falcon-success-active-background: var(--pt-good-tint);
  --pt-btn-falcon-danger-color: var(--pt-bad);
  --pt-btn-falcon-danger-hover-color: var(--pt-bad);
  --pt-btn-falcon-danger-active-color: var(--pt-bad);
  --pt-btn-falcon-danger-active-background: var(--pt-bad-tint);
  --pt-btn-falcon-warning-color: var(--pt-warn);
  --pt-btn-falcon-warning-hover-color: var(--pt-warn);
  --pt-btn-falcon-warning-active-color: var(--pt-warn);
  --pt-btn-falcon-warning-active-background: var(--pt-warn-tint);
  --pt-btn-falcon-info-color: var(--pt-brand-ink);
  --pt-btn-falcon-info-hover-color: var(--pt-brand-ink);
  --pt-btn-falcon-info-active-color: var(--pt-brand-ink);
  --pt-btn-falcon-info-active-background: var(--pt-brand-tint);
}

:root[data-bs-theme="light"] {
  --pt-100: #f6f8fb; --pt-200: #eef1f6; --pt-300: #e5e9f0; --pt-400: #d3d9e3;
  --pt-500: #8a93a6; --pt-600: #4a566b; --pt-700: #3d485c; --pt-800: #2c3547;
  --pt-900: #1d2536; --pt-1000: #141b29; --pt-1100: #0f1626;

  --pt-secondary-bg-rgb: 241, 244, 249;
  --pt-tertiary-bg-rgb: 241, 244, 249;
  --pt-light-rgb: 241, 244, 249;

  --pt-btn-falcon-background: #ffffff;
  --pt-btn-falcon-box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .08), 0 1px 1.5px 0 rgba(0, 0, 0, .07);
  --pt-btn-falcon-hover-box-shadow: 0 0 0 1px rgba(43, 45, 80, .1), 0 2px 5px 0 rgba(43, 45, 80, .1), 0 3px 9px 0 rgba(43, 45, 80, .08);
}

/* Falcon set the app font on body via its build; stock Bootstrap uses the
   native stack, so restate the brand type here. */
body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--pt-font-sans-serif); }