/* =============================================================================
   BBCRM tokens - layers 1 (primitives) and 2 (semantic), shared by every Blazor
   project (linked before bbcrm-theme.css by every host). WebForms does not read
   this file. Components read layer 2 only.
   ============================================================================= */
/* ---- 0. fonts: self-hosted variable woff2 (OFL, licence in fonts/OFL.txt; latin subset with Spanish accents); one file serves every weight */
@font-face { font-family: "Hanken Grotesk"; src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Sora"; src: url("fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

/* ---- 1. primitives -------------------------------------------------------- */
:root {
    --bb-navy:        #010f20;
    --bb-navy-800:    #142138;
    --bb-navy-700:    #1b2a4a;
    --bb-navy-500:    #345f8a;

    --bb-gold-deep:   #a87c1b;
    --bb-gold-bright: #e0b54a;
    --bb-gold-ink:    #8a6514;

    --bb-n-0:   #ffffff;
    --bb-n-25:  #f8fafc;
    --bb-n-50:  #f1f5f9;
    --bb-n-100: #e6ecf3;
    --bb-n-200: #d3dce7;
    --bb-n-400: #94a3b8;
    --bb-n-600: #51607a;
    --bb-n-800: #232d3f;
    --bb-n-900: #121821;

    --bb-green: #1f9d57;
    --bb-amber: #c2410c;
    --bb-red:   #d6453d;
    --bb-blue:  #1f6fb2;

    --bb-radius-sm: .25rem;
    --bb-radius:    .375rem;
    --bb-radius-lg: .625rem;

    --bb-e1: 0 1px 2px rgba(16, 24, 40, .06);
    --bb-e2: 0 2px 8px rgba(16, 24, 40, .08);
    --bb-e3: 0 8px 24px rgba(16, 24, 40, .12);
    --bb-scrim: rgba(16, 24, 40, .45);

    --bb-font: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bb-font-display: "Sora", "Segoe UI", system-ui, sans-serif;
}

/* ---- 2. semantic - light -------------------------------------------------- */
:root,
[data-bs-theme="light"] {
    --bb-surface:        var(--bb-n-0);
    --bb-surface-sunken: #edf0f5;
    --bb-surface-raised: var(--bb-n-0);
    --bb-border:         var(--bb-n-200);
    --bb-border-strong:  var(--bb-n-400);

    --bb-text:           #121212;
    --bb-text-muted:     var(--bb-n-600);
    --bb-text-onbrand:   var(--bb-n-0);

    --bb-brand:          var(--bb-navy-700);
    --bb-brand-hover:    var(--bb-navy-800);
    --bb-accent:         var(--bb-gold-deep);
    --bb-accent-soft:    rgba(168, 124, 27, .12);

    --bb-link:           var(--bb-gold-ink);
    --bb-text-danger:    #c23a32;

    --bb-focus:          var(--bb-gold-deep);
    /* 2px surface gap + 2px gold: at least 3:1 against every surface we draw */
    --bb-focus-ring:     0 0 0 2px var(--bb-surface), 0 0 0 4px var(--bb-accent);

    --bb-btn-brand-fg:   #1b2a4a;  --bb-btn-brand-bg:   rgba(27, 42, 74, .07);   --bb-btn-brand-bg-h:   rgba(27, 42, 74, .13);
    --bb-btn-ok-fg:      #1f8a4c;  --bb-btn-ok-bg:      rgba(31, 138, 76, .09);  --bb-btn-ok-bg-h:      rgba(31, 138, 76, .16);
    --bb-btn-danger-fg:  #c23a32;  --bb-btn-danger-bg:  rgba(194, 58, 50, .08);  --bb-btn-danger-bg-h:  rgba(194, 58, 50, .15);
    --bb-btn-quiet-fg:   #51607a;  --bb-btn-quiet-bg:   transparent;             --bb-btn-quiet-bg-h:   rgba(81, 96, 122, .10);

    --bb-danger-bg:  #fbe7e6;
    --bb-label-req:  #b3554d;

    /* Member portal roles. */
    --bb-border-subtle:   #e3e7eb;                 /* card and row hairlines, quieter than --bb-border */
    --bb-brand-deep:      var(--bb-navy);          /* the dark slab: portal bar, sign-in ground, primary button */
    --bb-ink:             var(--bb-navy);          /* strongest foreground: active tab, hover edge, focus outline */
    --bb-accent-bright:   var(--bb-gold-bright);   /* gold on the slab, and the "this needs you" rule */
    --bb-success-bg:      #eef7f0;
    --bb-success-border:  #2e7d4f;
    --bb-text-success:    #1f5c39;
}

/* ---- 2. semantic - dark --------------------------------------------------- */
[data-bs-theme="dark"] {
    --bb-surface:        #1a2029;
    --bb-surface-sunken: #121212;
    --bb-surface-raised: #222a35;
    --bb-border:         rgba(255, 255, 255, .12);
    --bb-border-strong:  rgba(255, 255, 255, .24);

    --bb-text:           #ffffff;
    --bb-text-muted:     #aeb7c6;
    --bb-text-onbrand:   var(--bb-n-0);

    --bb-brand:          #4d7fb8;
    --bb-brand-hover:    #6b98cc;
    --bb-accent:         var(--bb-gold-bright);
    --bb-accent-soft:    rgba(224, 181, 74, .16);

    --bb-link:           var(--bb-gold-bright);
    --bb-text-danger:    #e8737f;

    --bb-focus:          var(--bb-gold-bright);
    --bb-focus-ring:     0 0 0 2px var(--bb-surface), 0 0 0 4px var(--bb-accent-bright);

    --bb-e1: 0 1px 2px rgba(0, 0, 0, .40);
    --bb-e2: 0 2px 8px rgba(0, 0, 0, .48);
    --bb-e3: 0 8px 24px rgba(0, 0, 0, .58);
    --bb-scrim: rgba(0, 0, 0, .60);

    --bb-btn-brand-fg:   #7cb0e8;  --bb-btn-brand-bg:   rgba(124, 176, 232, .14);  --bb-btn-brand-bg-h:   rgba(124, 176, 232, .24);
    --bb-btn-ok-fg:      #5cc97a;  --bb-btn-ok-bg:      rgba(92, 201, 122, .14);   --bb-btn-ok-bg-h:      rgba(92, 201, 122, .24);
    --bb-btn-danger-fg:  #e8737f;  --bb-btn-danger-bg:  rgba(232, 115, 127, .14);  --bb-btn-danger-bg-h:  rgba(232, 115, 127, .24);
    --bb-btn-quiet-fg:   #9aa6b8;  --bb-btn-quiet-bg:   transparent;               --bb-btn-quiet-bg-h:   rgba(255, 255, 255, .08);

    --bb-danger-bg:  rgba(239, 106, 98, 0.12);
    --bb-label-req:  #d9908a;

    --bb-border-subtle:   rgba(255, 255, 255, .08);
    --bb-brand-deep:      var(--bb-navy);
    --bb-ink:             var(--bb-text);
    --bb-accent-bright:   var(--bb-gold-bright);
    --bb-success-bg:      rgba(92, 201, 122, .14);
    --bb-success-border:  #5cc97a;
    --bb-text-success:    #5cc97a;
}

/* ---- 2b. roles WebForms already uses, now shared ----------------------------- */
:root,
[data-bs-theme="light"] {
    --bb-gold: var(--bb-gold-deep);
    --bb-gold-soft: rgba(168, 124, 27, 0.14);
    --app-accent: var(--bb-gold-deep);
    --app-accent-soft: rgba(168, 124, 27, 0.14);
    --bb-gold-on-dark: var(--bb-gold-bright);
    --bb-gold-on-dark-soft: rgba(224, 181, 74, 0.16);
    --bb-ok: var(--bb-green);       --bb-ok-bg: #e7f6ed;
    --bb-warn: var(--bb-amber);     --bb-warn-bg: #fdf0e7;   --bb-warn-bd: #f6c9a8;
    --bb-danger: var(--bb-red);
    --bb-info: var(--bb-blue);      --bb-info-bg: #e6f0f8;
    --bb-pager-current: var(--bb-blue);
    --bb-card-title: #355681;
    --bb-quiet: var(--bb-n-400);

    /* shell chrome: today's top bar and rail */
    --bb-shell-bg: linear-gradient(to bottom, #f0f4f9 0%, #e2e8f1 100%);
    --bb-shell-text: var(--bb-navy-700);
    --bb-shell-muted: var(--bb-n-600);
    --bb-shell-border: #c8d3e2;
    --bb-shell-well: rgba(255, 255, 255, 0.55);
    --bb-shell-hover: rgba(255, 255, 255, 0.92);
    --bb-shell-accent: var(--bb-gold-deep);
    /* header: search field */
    --bb-shell-shadow: 0 1px 0 var(--bb-shell-border), 0 6px 16px rgba(16, 24, 40, 0.07);
    --bb-shell-test-ink: var(--bb-warn);
    --bb-shell-field-bg: #ffffff;
    --bb-shell-field-border: #c8d3e2;
    /* rail and the open group's panel */
    --bb-shell-rail-bg: #e2e8f1;
    --bb-shell-rail-text: #24344f;
    --bb-shell-rail-head: #44567a;
    --bb-shell-rail-active: var(--bb-n-0);
    --bb-shell-rail-active-shadow: 0 1px 5px rgba(16, 24, 40, 0.16);
    --bb-shell-rail-child: rgba(255, 255, 255, 0.62);
    --bb-shell-rail-child-border: rgba(27, 42, 74, 0.08);
    --bb-shell-rail-icon-filter: invert(0.72);
    /* content canvas and the text the frame inherits (WebForms values; Site.css html/body keep a copy for pages without tokens) */
    --bb-shell-canvas: #fff;
    --bb-page-ground: #edf0f5;   /* body under the frame: theme.css --background-color; dark = DevExpress Office365Dark body */
    --bb-page-text: #333;
    /* classic top bar: the action chips (Support cerulean, action green, Sign out red) */
    --bb-chip-support-fg: #0a6486;
    --bb-chip-support-hover-bg: #0a6486;    --bb-chip-support-hover-fg: #ffffff;   --bb-chip-support-hover-border: #0a6486;
    --bb-chip-support-active-bg: #084f6a;   --bb-chip-support-active-fg: #ffffff;  --bb-chip-support-active-border: #084f6a;
    --bb-chip-ok-fg: #146c43;
    --bb-chip-ok-hover-bg: #146c43;         --bb-chip-ok-hover-fg: #ffffff;        --bb-chip-ok-hover-border: #146c43;
    --bb-chip-ok-active-bg: #0f5132;        --bb-chip-ok-active-fg: #ffffff;       --bb-chip-ok-active-border: #0f5132;
    --bb-chip-danger-fg: #b02a37;
    --bb-chip-danger-hover-bg: #b02a37;     --bb-chip-danger-hover-fg: #ffffff;    --bb-chip-danger-hover-border: #b02a37;
    --bb-chip-danger-active-bg: #842029;    --bb-chip-danger-active-fg: #ffffff;   --bb-chip-danger-active-border: #842029;
    /* page title bar */
    --bb-titlebar-bg: linear-gradient(to bottom, #ffffff 0%, #f9fbfd 100%);
    --bb-titlebar-border: #e1e8ed;
    --bb-titlebar-title: #1E293B;
    --bb-titlebar-pill-bg: #f3f4f6;
    --bb-titlebar-pill-border: #dee2e6;
    --bb-titlebar-toggle-on-fg: #ffffff;
}

[data-bs-theme="dark"] {
    --bb-gold: var(--bb-gold-bright);
    --bb-gold-soft: rgba(224, 181, 74, 0.16);
    --app-accent: var(--bb-gold-bright);
    --app-accent-soft: rgba(224, 181, 74, 0.16);
    --bb-gold-on-dark: var(--bb-gold-bright);
    --bb-gold-on-dark-soft: rgba(224, 181, 74, 0.16);
    --bb-ok: #37d07f;       --bb-ok-bg: rgba(55, 208, 127, 0.12);
    --bb-warn: #e8883c;     --bb-warn-bg: rgba(232, 136, 60, 0.13);  --bb-warn-bd: rgba(232, 136, 60, 0.42);
    --bb-danger: #ef6a62;
    --bb-info: #5aa9e6;     --bb-info-bg: rgba(90, 169, 230, 0.12);
    --bb-card-title: #f1f3f5;
    --bb-quiet: #6b7689;

    --bb-shell-bg: linear-gradient(135deg, #2a2f3e 0%, #232d3f 100%);
    --bb-shell-text: #ffffff;
    --bb-shell-muted: #aeb7c6;
    --bb-shell-border: rgba(255, 255, 255, 0.08);
    --bb-shell-test-ink: #f0a468;
    --bb-shell-field-bg: rgba(0, 0, 0, 0.25);
    --bb-shell-field-border: rgba(255, 255, 255, 0.18);
    --bb-shell-well: rgba(0, 0, 0, 0.28);
    --bb-shell-hover: rgba(255, 255, 255, 0.08);
    --bb-shell-accent: var(--bb-gold-bright);
    --bb-shell-rail-bg: var(--bb-shell-bg);
    --bb-shell-rail-text: #ffffff;
    --bb-shell-rail-head: #aeb7c6;
    --bb-shell-rail-active: rgba(255, 255, 255, 0.08);
    --bb-shell-rail-active-shadow: none;
    --bb-shell-rail-child: rgba(255, 255, 255, 0.045);
    --bb-shell-rail-child-border: rgba(255, 255, 255, 0.06);
    --bb-shell-rail-icon-filter: none;
    --bb-shell-canvas: #212529;
    --bb-page-ground: #222222;
    --bb-page-text: var(--bb-text);
    --bb-icon-boost: brightness(1.9);   /* lift for the neutral <img> icons, both stacks */
    --bb-pager-current: var(--bb-info);
    --bb-shell-shadow: 0 1px 0 var(--bb-shell-border), 0 6px 16px rgba(0, 0, 0, 0.45);
    --bb-chip-support-fg: #7cc5ea;
    --bb-chip-support-hover-bg: rgba(124, 197, 234, 0.15);   --bb-chip-support-hover-fg: #a5d8f0;  --bb-chip-support-hover-border: #a5d8f0;
    --bb-chip-support-active-bg: rgba(124, 197, 234, 0.25);  --bb-chip-support-active-fg: #c2e4f5; --bb-chip-support-active-border: #c2e4f5;
    --bb-chip-ok-fg: #75b798;
    --bb-chip-ok-hover-bg: rgba(117, 183, 152, 0.15);        --bb-chip-ok-hover-fg: #a3cfbb;       --bb-chip-ok-hover-border: #a3cfbb;
    --bb-chip-ok-active-bg: rgba(117, 183, 152, 0.25);       --bb-chip-ok-active-fg: #d1e7dd;      --bb-chip-ok-active-border: #d1e7dd;
    --bb-chip-danger-fg: #ea868f;
    --bb-chip-danger-hover-bg: rgba(234, 134, 143, 0.15);    --bb-chip-danger-hover-fg: #f1aeb5;   --bb-chip-danger-hover-border: #f1aeb5;
    --bb-chip-danger-active-bg: rgba(234, 134, 143, 0.25);   --bb-chip-danger-active-fg: #f8d7da;  --bb-chip-danger-active-border: #f8d7da;
    --bb-titlebar-bg: linear-gradient(to bottom, #202020 0%, #1a1a1a 100%);
    --bb-titlebar-border: rgba(255, 255, 255, 0.10);
    --bb-titlebar-title: #f1f3f5;
    --bb-titlebar-pill-bg: rgba(255, 255, 255, 0.06);
    --bb-titlebar-pill-border: rgba(255, 255, 255, 0.14);
    --bb-titlebar-toggle-on-fg: #0e1f38;
}

/* ---- 2b'. shared roles that are the same in both themes ----------------------- */
:root {
    --bb-page-font: 'Hanken Grotesk', 'Lato', Tahoma, Geneva, sans-serif;
    --bb-navbar-separator: #ccc;
    --bb-shell-press: rgba(127, 127, 127, 0.15);
    --bb-shell-badge-bg: rgba(255, 255, 255, 0.10);
    --bb-titlebar-shadow: 0 2px 6px rgba(0,0,0,0.06);
    --bb-titlebar-panel-shadow: 0 2px 4px rgba(0,0,0,0.02);
    --bb-titlebar-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bb-titlebar-btn-shadow: 0 1px 2px rgba(0,0,0,0.05);
    --bb-titlebar-help-hover: rgba(0, 153, 204, 0.12);
    --bb-titlebar-help-ring: 0 0 0 2px rgba(0, 153, 204, 0.35);
}

/* ---- 2c. shell geometry (same in both themes) -------------------------------- */
:root {
    --bb-shell-top: 64px;
    --bb-shell-bar: 64px;
    --bb-shell-menu-row: 44px;
    --bb-shell-rail-w-full: 252px;
    --bb-shell-rail-w: var(--bb-shell-rail-w-full);
    --bb-shell-rail-w-icon: 104px;
    --bb-shell-plate-w: var(--bb-shell-rail-w-full);
    --bb-shell-search-w: 440px;
    --bb-shell-hit: 44px;
}

/* ---- 2c-bar. the navy bar's translucent white and gold, over either bar ground (same in both themes) ----------- */
:root {
    --bb-bar-line:        rgba(255, 255, 255, .16);
    --bb-bar-fill:        rgba(255, 255, 255, .09);
    --bb-bar-hover:       rgba(255, 255, 255, .10);
    --bb-bar-fill-focus:  rgba(255, 255, 255, .13);
    --bb-bar-switch-off:  rgba(255, 255, 255, .28);
    --bb-bar-me-line:     rgba(255, 255, 255, .34);
    --bb-bar-me-fill:     rgba(255, 255, 255, .14);
    --bb-bar-me-hover:    rgba(255, 255, 255, .24);
    --bb-bar-edge:        rgba(224, 181, 74, .35);
    --bb-bar-help-fill:   rgba(224, 181, 74, .14);
    --bb-bar-help-hover:  rgba(224, 181, 74, .26);
}

/* ---- 2d. AI is always labelled (Home reading, Support helper): gold band, gold AI badge on navy text, figure chips */
:root,
[data-bs-theme="light"] {
    --bb-ai-band:     color-mix(in srgb, var(--bb-gold-bright) 22%, transparent);
    --bb-ai-rule:     var(--bb-gold-deep);
    --bb-ai-badge-bg: var(--bb-gold-bright);
    --bb-ai-badge-fg: var(--bb-navy);
    --bb-ai-fig:      color-mix(in srgb, var(--bb-gold-deep) 16%, transparent);
}

[data-bs-theme="dark"] {
    --bb-ai-band:     color-mix(in srgb, var(--bb-gold-bright) 18%, transparent);
    --bb-ai-rule:     var(--bb-gold-bright);
    --bb-ai-badge-bg: var(--bb-gold-bright);
    --bb-ai-badge-fg: var(--bb-navy);
    --bb-ai-fig:      color-mix(in srgb, var(--bb-gold-bright) 18%, transparent);
}

/* ---- 2e. modern shell (approved 2026-10-13): menu, location plate, drop-downs and the group tones ---------------
   Green and blue groups use the ok and info roles; the five tones below are the only new hues. */
:root,
[data-bs-theme="light"] {
    --bb-nav-surface:     #f7f8fb;
    --bb-nav-hover:       rgba(1, 15, 32, .05);
    --bb-nav-active:      var(--bb-n-0);
    --bb-nav-active-edge: var(--bb-accent);
    --bb-nav-elev:        0 1px 2px rgba(1, 15, 32, .08), 0 0 0 1px rgba(1, 15, 32, .06);

    --bb-plate:           var(--bb-navy);
    --bb-plate-text:      var(--bb-n-0);
    --bb-plate-muted:     #aeb7c6;
    --bb-plate-rule:      var(--bb-gold-bright);
    --bb-plate-hover:     rgba(255, 255, 255, .08);

    --bb-pop:             var(--bb-n-0);
    --bb-pop-elev:        0 12px 32px rgba(1, 15, 32, .16), 0 0 0 1px rgba(1, 15, 32, .08);
    --bb-tip:             var(--bb-navy);
    --bb-tip-text:        var(--bb-n-0);
    --bb-me:              var(--bb-navy);
    --bb-find-elev:       0 10px 24px rgba(1, 15, 32, .10);
    --bb-shell-scrim:     rgba(1, 15, 32, .4);

    --bb-tone-gold:   var(--bb-gold-ink);  --bb-tone-gold-soft:   rgba(168, 124, 27, .13);
    --bb-tone-violet: #6142b8;             --bb-tone-violet-soft: rgba(97, 66, 184, .11);
    --bb-tone-teal:   #0f7a83;             --bb-tone-teal-soft:   rgba(15, 122, 131, .11);
    --bb-tone-orange: #b5530f;             --bb-tone-orange-soft: rgba(194, 83, 12, .11);
    --bb-tone-slate:  #45536b;             --bb-tone-slate-soft:  rgba(69, 83, 107, .11);
}

[data-bs-theme="dark"] {
    --bb-nav-surface:     #151a22;
    --bb-nav-hover:       rgba(255, 255, 255, .06);
    --bb-nav-active:      rgba(224, 181, 74, .12);
    --bb-nav-active-edge: var(--bb-accent);
    --bb-nav-elev:        0 0 0 1px rgba(224, 181, 74, .22);

    --bb-plate:           var(--bb-navy);
    --bb-plate-text:      var(--bb-n-0);
    --bb-plate-muted:     #aeb7c6;
    --bb-plate-rule:      var(--bb-gold-bright);
    --bb-plate-hover:     rgba(255, 255, 255, .08);

    --bb-pop:             #222a35;
    --bb-pop-elev:        0 12px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .10);
    --bb-tip:             #2e3949;
    --bb-tip-text:        var(--bb-n-0);
    --bb-me:              #26364d;
    --bb-find-elev:       0 10px 24px rgba(0, 0, 0, .45);
    --bb-shell-scrim:     rgba(0, 0, 0, .55);

    --bb-tone-gold:   #e9c46a;  --bb-tone-gold-soft:   rgba(224, 181, 74, .16);
    --bb-tone-violet: #b4a2f5;  --bb-tone-violet-soft: rgba(160, 140, 240, .16);
    --bb-tone-teal:   #6fd0d6;  --bb-tone-teal-soft:   rgba(80, 200, 210, .14);
    --bb-tone-orange: #f2a46a;  --bb-tone-orange-soft: rgba(242, 150, 90, .15);
    --bb-tone-slate:  #b9c3d3;  --bb-tone-slate-soft:  rgba(185, 195, 211, .12);
}

/* ---- 2f. type ramp (Fluent 2): the only sizes 3.0 uses; regular and semibold are the only weights -------------------
   caption 12/16 hints and meta | body 14/20 text, controls, grid cells | subtitle2 16/22 | subtitle1 20/28 page titles and the one
   emphasised amount | title1 32/40 reserved for the wall-mounted kiosk name. Nothing else may set a font-size. */
:root {
    --bb-fs-caption:   12px;  --bb-lh-caption:   16px;
    --bb-fs-body:      14px;  --bb-lh-body:      20px;
    --bb-fs-subtitle2: 16px;  --bb-lh-subtitle2: 22px;
    --bb-fs-subtitle1: 20px;  --bb-lh-subtitle1: 28px;
    --bb-fs-title1:    32px;  --bb-lh-title1:    40px;
    --bb-fw-regular:   400;
    --bb-fw-semibold:  600;
    --bb-row-h:        36px;
}