/*
 * theme_member_v1.0.0.css — EGL Capital Group member portal theme.
 *
 * Schema:  LOCKED CANONICAL SCHEMA v1.1 (build-theme/templates/theme-template.css) —
 *          all 126 tokens, canonical names, canonical order — PLUS one declared
 *          non-canonical extension block (--egl-*) at the end of :root.
 * Portal:  member (public, anonymous; member/ is the web root)
 * Source:  "EGL Capital Group" Claude Design bundle (EGL Capital Group.html — one long
 *          page: Hero + fullscreen menu, 12 content sections, Footer). The bundle carries
 *          NO token CSS: every value below was read off the design's inline styles, so
 *          this file is the first place those values become tokens.
 * Created: 2026-10-15 (build-theme, Bootstrap-new)
 *
 * REBRAND 2026-10-15 — colours retuned to the EGL Capital Group LOGO (navy #081C3A + the
 * metallic gold gradient #8E6020 → #B98E51 → #EBBF7C), approved by the owner with a
 * before/after preview. Current mapping:
 *   logo mid gold   #B98E51 -> --primary-color, --accent-color, --accent-text-color,
 *                              --hyperlink-text-color, --btn-primary-bg-color, --btn-border, …
 *   logo light gold #DDB172 -> --egl-accent-on-dark-color (gold text on dark photos)
 *   logo dark gold  #8E6020 -> --hover-text-color
 *   logo navy       #081C3A -> --primary-text-color, --tertiary-text-color, --secondary-color,
 *                              menu overlay / hero + long-term scrims (navy alpha)
 *   deeper navy     #050F22 -> --fourth-color, Core Strengths scrim
 *   navy greys      #46556B -> --footer-text-color; #5E6B7F -> --secondary-text-color
 * Unchanged: cream #F6F5F1, footer stone gradient, the warm Expertise / Global scrims and
 * photo backdrops, fonts, sizes. The ORIGINAL design-bundle mapping is kept below for history.
 *
 * Palette at first build (design value -> canonical slot):
 *   brand gold             #F0A33C -> --primary-color, --accent-color, --accent-text-color,
 *                                     --hyperlink-text-color, --btn-primary-bg-color,
 *                                     --btn-primary-hover-text-color, --btn-border
 *   link hover             #D48A22 -> --hover-text-color
 *   body ink               #111111 -> --primary-text-color
 *   eyebrow labels         #222222 -> --tertiary-text-color
 *   copyright line         #666666 -> --secondary-text-color
 *   footer copy + links    #555555 -> --footer-text-color
 *   cream sections         #F6F5F1 -> --secondary-bg-color, --fifth-color
 *   footer gradient        #F5F3EE -> --footer-bg-color (top stop)
 *                          #E9E5DD -> --sixth-color     (bottom stop)
 *   photo backdrops        #6F7682 -> --tertiary-color  (hero)
 *                          #1C2230 -> --secondary-color (Committed to Long-Term Value)
 *                          #0F1116 -> --fourth-color    (Our Core Strengths)
 *   menu overlay           rgba(15,17,22,.96) -> --modal-overlay-color
 *   photo shadow / radius  0 8px 22px rgba(0,0,0,.28) / 12px -> --shadow-lg / --border-radius-md
 *   CTA pill               999px -> --btn-border-radius (9999px, same render)
 *
 * DERIVED, not in the design (brand slots the design never exercises, filled on-brand
 * so a future consumer cannot pick up the template's olive/red): --accent-soft-color
 * (gold at 15% on white), secondary/tertiary buttons, listing rows/header.
 *
 * Fonts: Noto Sans (400/500) body + eyebrows -> --font-sans; Lato (300/400) for most
 * headings and numerals -> --font-display; Nunito (400/500/600) for the hero, wordmark,
 * CTA and three feature headings -> --egl-font-brand (no canonical slot for a third
 * family). The design CSS asks for Nunito 300 four times but the bundle never loaded a
 * 300 face, so the approved render is the browser's nearest weight (400). The head
 * loads exactly the bundle's faces, so the live site renders the same.
 *
 * ── Non-canonical extension: --egl-* ─────────────────────────────────────────────
 * Declared 2026-10-15 by the owner at build-theme's Phase 3 approval gate (path:
 * Extend). Why it exists: page-reskin's token gate rejects every raw colour in page
 * markup, soft-fallbacks `var(--x,#hex)` included, so each design value must be a
 * declared token. Same pattern as nvtraderpro (--nv-*) and DeepRootAlpha (--dra-*).
 * Rule: an --egl-* token exists only where NO canonical slot fits the role.
 *
 * Paradigm: :root tokens ONLY. Pages consume them via Tailwind arbitrary values —
 *   bg-[color:var(--primary-color)]   text-[color:var(--egl-inverse-muted-text-color)]
 *   bg-[image:var(--egl-strengths-scrim)]   shadow-[var(--shadow-lg)]
 * No class definitions, no inline styles.
 *
 * Changelog:
 * 2026-10-15 (in place) - REBRAND to the logo palette: 26 token VALUES changed (no renames,
 *                       no removals) + 1 new extension token --egl-accent-on-dark-color.
 * 2026-10-15 (in place, additive) - Extend: +16 homepage type-size tokens for /build-public-page.
 *                       No existing token changed.
 * 2026-10-15 (in place, additive) - Extend: +3 --egl-header/menu-*-size tokens for /build-header
 *                       (email link, menu close, menu links). No existing token changed.
 * 2026-10-15 (in place, additive) - Extend: +3 --egl-footer-*-size tokens for /build-footer
 *                       (tagline, column headings, copyright). No existing token changed.
 * v1.0.0 - 2026-10-15 - Created (Bootstrap-new from the EGL Capital Group design bundle).
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
   * 1. Brand colors                                              [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-color: #B98E51;
  --secondary-color: #081C3A;
  --tertiary-color: #6F7682;
  --fourth-color: #050F22;
  --fifth-color: #F6F5F1;
  --sixth-color: #E9E5DD;
  --accent-color: #B98E51;
  --accent-soft-color: #F5EEE5;  /* v1.1 — for focus rings, alert bg, soft hover */

  /* ═══════════════════════════════════════════════════════════════════════
   * 2. Status colors                                       [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --error-color: #fb403a;
  --warning-color: #ffe139;
  --success-color: #2CAA0D;
  --info-color: #3B82F6;          /* v1.1 — for "Processing" pills, info messages */
  --orange-color: #F97316;        /* v1.1 — for tag/badge variants */
  --purple-color: #A855F7;        /* v1.1 — for tag/badge variants */
  --hyperlink-text-color: #B98E51;

  /* ═══════════════════════════════════════════════════════════════════════
   * 3. Background colors                                   [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-bg-color: #fff;
  --default-primary-bg-color: #000;
  --default-secondary-bg-color: #fff;
  --primary-bg-color: #fff;
  --secondary-bg-color: #F6F5F1;

  /* ═══════════════════════════════════════════════════════════════════════
   * 4. Text colors                                              [BRAND]
   * Convention: primary = body text, accent = brand highlight
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-text-color: #081C3A;
  --secondary-text-color: #5E6B7F;
  --tertiary-text-color: #081C3A;
  --inverse-text-color: #FFFFFF;
  --accent-text-color: #B98E51;
  --hover-text-color: #8E6020;
  --default-primary-text-color: #000;
  --default-secondary-text-color: #fff;

  /* ═══════════════════════════════════════════════════════════════════════
   * 5. Borders                                             [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-border: 1px solid #ddd;
  --primary-border-color: #DEDEDE;
  --secondary-border-color: #F1F2F4;  /* v1.1 — softer border for table cells, dividers */
  --default-border-radius: 12px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 6. Border radius scale                                 [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --border-radius-xs: 5px;
  --border-radius-md: 12px;
  --border-radius-lg: 15px;
  --border-radius-full: 9999px;  /* v1.1 — for pills, status badges, profile chip */

  /* ═══════════════════════════════════════════════════════════════════════
   * 7. Text size scale                                     [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --xl-text-size: clamp(24px, 4vw, 37px);
  --lg-text-size: clamp(18px, 4vw, 24px);
  --md-text-size: clamp(12px, 4vw, 17px);
  --sm-text-size: clamp(12px, 4vw, 15px);
  --xs-text-size: 13px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 8. Font weight                                         [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-font-weight-thin: 300;
  --default-font-weight-medium: 400;
  --default-font-weight-thick: 500;
  --default-font-weight-bold: 700;
  --default-font-weight-max: 900;

  /* ═══════════════════════════════════════════════════════════════════════
   * 9. Font family                                         [STRUCTURAL]
   * v1.1 — Tailwind utilities: font-sans, font-display, font-mono
   * ═════════════════════════════════════════════════════════════════════ */
  --font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;

  /* ═══════════════════════════════════════════════════════════════════════
   * 10. Shadow                                             [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.28);

  /* ═══════════════════════════════════════════════════════════════════════
   * 11. Z-index scale                                      [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ═══════════════════════════════════════════════════════════════════════
   * 12. Header                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --header-height: 70px;
  --js-header-height: 70px;
  --header-bg-color: transparent;
  --header-text-size: 15px;
  --header-text-color: #FFFFFF;
  --header-hover-color: var(--accent-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 13. Footer                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --footer-bg-color: #F5F3EE;
  --footer-text-size: 15px;
  --footer-text-color: #46556B;
  --footer-hover-color: var(--accent-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 14. Button                                                  [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --btn-primary-bg-color: #B98E51;
  --btn-secondary-bg-color: transparent;
  --btn-tertiary-bg-color: #fff;
  --btn-disabled-bg-color: #d3d3d3;
  --btn-primary-hover-bg-color: transparent;
  --btn-secondary-hover-bg-color: #B98E51;
  --btn-tertiary-hover-bg-color: #F6F5F1;
  --btn-primary-text-color: #fff;
  --btn-secondary-text-color: #B98E51;
  --btn-tertiary-text-color: #081C3A;
  --btn-disabled-text-color: #9d9d9d;
  --btn-primary-hover-text-color: #B98E51;
  --btn-secondary-hover-text-color: #fff;
  --btn-tertiary-hover-text-color: #081C3A;
  --btn-width-long: 200px;
  --btn-width-short: 100px;
  --btn-border-radius: 9999px;
  --btn-border: 1px solid #B98E51;
  --btn-font-size: 13px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 15. Input                                              [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --input-label-size: 15px;
  --input-text-size: 15px;
  --input-border-radius: 5px;
  --input-border: 1px solid #DEDEDE;
  --input-bg-color: #FFFFFF;
  --input-width-long: 100%;
  --input-width-short: 200px;
  --input-placeholder-size: 15px;
  --input-placeholder-color: #d6d6d6;
  --input-disabled-bg-color: #d6d6d6;
  --input-focus-border-color: var(--primary-color);
  --input-error-border-color: var(--error-color);
  --input-error-text-color: var(--error-color);
  --input-success-border-color: var(--success-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * 16. Listing                                                 [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --listing-header-bg-color: #E9E5DD;
  --listing-header-text-color: #081C3A;
  --listing-row-primary-color: #F6F5F1;
  --listing-row-secondary-color: #fff;
  --listing-row-child-primary-color: #F5EEE5;
  --listing-row-child-secondary-color: #F5EEE5;
  --listing-header-text-size: 17px;
  --listing-row-text-size: 17px;
  --listing-header-child-text-size: 17px;
  --listing-row-child-text-size: 17px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 17. Card                                               [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --card-bg-color: #fff;
  --card-border-color: var(--primary-border-color);
  --card-border-radius: var(--border-radius-md);
  --card-shadow: var(--shadow-md);
  --card-padding: 16px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 18. Modal                                              [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --modal-overlay-color: rgba(8, 28, 58, 0.96);
  --modal-bg-color: #fff;
  --modal-border-radius: var(--border-radius-lg);
  --modal-shadow: var(--shadow-lg);

  /* ═══════════════════════════════════════════════════════════════════════
   * 19. Tabs                                                    [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --tab-active-bg-color: var(--primary-color);
  --tab-active-text-color: #fff;
  --tab-inactive-bg-color: transparent;
  --tab-inactive-text-color: var(--primary-text-color);
  --tab-border-color: var(--primary-border-color);

  /* ═══════════════════════════════════════════════════════════════════════
   * Non-canonical extension: --egl-*                [EXTENSION 2026-10-15]
   * Declared by the owner at build-theme Phase 3 (path: Extend). Each token
   * exists only because NO canonical slot fits the role. See file header.
   * ═════════════════════════════════════════════════════════════════════ */
  /* Third type family: hero h1 + lead, wordmark, header email, CTA, the Expertise /
     Global Reach / Strategies h2s, and body copy on the photo sections. */
  --egl-font-brand: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Gold for text on dark photos (hero h1, photo-band h2s, 01–04, menu contact link) —
     the logo's light gold (p80 of its gold gradient). The mid gold (--accent-text-color)
     is too dark to read on the sunrise sky. [REBRAND 2026-10-15] */
  --egl-accent-on-dark-color: #DDB172;
  /* Body copy on the dark Our Core Strengths photo. */
  --egl-inverse-muted-text-color: #E6E4DF;
  /* Photo backdrops: the dominant tone of each photo, painted until it decodes. */
  --egl-expertise-bg-color: #5B4434;
  --egl-global-bg-color: #9C5F4A;
  /* Photo scrims: legibility overlays tuned per photo. The *-scrim-color tokens are
     flat colours (use bg-[color:...]); the *-scrim tokens are gradient stacks
     (use bg-[image:...]). */
  --egl-hero-scrim-color: rgba(8, 28, 58, 0.3);
  --egl-longterm-scrim-color: rgba(8, 28, 58, 0.42);
  --egl-expertise-scrim: linear-gradient(180deg, rgba(40, 25, 15, 0.15), rgba(40, 25, 15, 0.4));
  --egl-global-scrim: linear-gradient(180deg, rgba(90, 40, 30, 0.15), rgba(60, 30, 30, 0.45));
  --egl-strengths-scrim: linear-gradient(180deg, rgba(5, 15, 34, 0.88) 0%, rgba(5, 15, 34, 0.6) 60%, rgba(5, 15, 34, 0.5) 100%);
  /* Footer type sizes [EXTENSION 2026-10-15, /build-footer]: the design's fluid sizes for
     the three footer roles no canonical size token covers. Approved by the owner at
     /build-footer Phase 3 ("Add --egl-* size tokens"). Footer links + body copy use the
     canonical --footer-text-size (15px) instead — the owner chose THEME WINS over the
     design's clamp(13px,1.05vw,15px) there. */
  --egl-footer-tagline-size: clamp(14px, 1.25vw, 18px);
  --egl-footer-heading-size: clamp(20px, 1.8vw, 26px);
  --egl-footer-copyright-size: clamp(12px, 1vw, 14px);
  /* Header + menu type sizes [EXTENSION 2026-10-15, /build-header]: the three header
     roles no canonical size token covers. Approved by the owner at /build-header Phase 3.
     The wordmark uses the canonical --header-text-size (15px, a match). */
  --egl-header-email-size: 11px;
  --egl-menu-close-size: 34px;
  --egl-menu-link-size: clamp(32px, 4vw, 56px);
  /* Homepage type sizes [EXTENSION 2026-10-15, /build-public-page]: the design's fluid
     sizes for the page-body roles no canonical size token covers. Approved by the owner
     at /build-public-page Phase 3. Names describe the ROLE, so a second page reusing a
     role reuses its token. */
  --egl-hero-title-size: clamp(40px, 4.6vw, 68px);      /* hero h1 (Nunito 300) */
  --egl-hero-lead-size: clamp(15px, 1.45vw, 21px);      /* hero paragraphs */
  --egl-eyebrow-size: 11px;                              /* "ABOUT US — FIRM OVERVIEW" etc. */
  --egl-section-title-size: clamp(40px, 4.9vw, 74px);   /* section h2 on white / cream */
  --egl-feature-title-size: clamp(36px, 4.5vw, 68px);   /* h2 on Global / Long-Term / Strengths photos */
  --egl-subtitle-size: clamp(16px, 1.5vw, 22px);        /* gold h3 under a section h2 */
  --egl-feature-subtitle-size: clamp(17px, 1.6vw, 24px); /* white h3 on the Expertise photo */
  --egl-body-size: clamp(14px, 1.2vw, 17px);            /* body copy on white / cream */
  --egl-card-title-size: clamp(18px, 1.75vw, 26px);     /* gold h3 over a text block */
  --egl-feature-lead-size: clamp(15px, 1.4vw, 20px);    /* Expertise photo paragraph */
  --egl-feature-body-size: clamp(15px, 1.35vw, 19px);   /* Global / Long-Term photo paragraphs */
  --egl-stat-value-size: clamp(48px, 5.5vw, 82px);      /* US$25B+ / 28+ / 20+ */
  --egl-stat-label-size: clamp(13px, 1.05vw, 15px);     /* stat captions */
  --egl-strength-index-size: clamp(28px, 2.8vw, 40px);  /* 01 – 04 */
  --egl-strength-title-size: clamp(18px, 1.8vw, 26px);  /* Core Strengths item titles */
  --egl-strength-body-size: clamp(14px, 1.1vw, 16px);   /* Core Strengths item copy */
}