/*
 * theme_member_v1.0.0.css — DeepRootAlpha 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 (--dra-*) at the end of :root.
 * Portal:  member (public, anonymous; member/ is the web root)
 * Source:  "DeepRootAlpha" Claude Design bundle (DeepRootAlpha.html, 8 screens:
 *          Hero, About, Our Approach, Investment Strategies, Investment Process,
 *          Capabilities, Contact, 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.
 *
 * Palette (design value -> canonical slot):
 *   navy CTA / dark card   #0b3a6a -> --primary-color, --btn-primary-bg-color
 *   ink (headings, nav)    #0f3d6b -> --secondary-color, --primary-text-color
 *   accent blue            #2b8ae0 -> --accent-color, --accent-text-color,
 *                                     --hyperlink-text-color, header/footer hover
 *   body copy              #5b7ca3 -> --secondary-text-color (now #56769a, see changelog)
 *   soft body              #6b88aa -> --tertiary-text-color  (now #5a799d, see changelog)
 *   hairline               #e3e9f0 -> --primary-border-color
 *   soft hairline          #edf1f6 -> --secondary-border-color
 *   soft surface           #f8fafc -> --secondary-bg-color, --fifth-color, input bg
 *   icon-tile tint         #eef5fd -> --accent-soft-color
 *
 * Fonts: Inter (300/400/500/600) for body + UI, Playfair Display (400/500 + 400 italic)
 * for every heading, numeral and the wordmark — the two families the bundle loads.
 *
 * ── Non-canonical extension: --dra-* ─────────────────────────────────────────────
 * Declared 2026-10-15 by the owner at build-theme's Step 0 hard-stop (path (c) Extend).
 * Why it exists: page-reskin's token gate (step 9b) rejects every raw colour in page
 * markup, soft-fallbacks `var(--x,#hex)` included, so each design value must be a
 * declared token. The design uses ~45 colours and 10 gradient stacks; the 126-slot
 * catalog can hold about 20 of them. The rest live in the --dra-* block, each tagged
 * with the design element it mirrors.
 * Rule: a --dra-* 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(--dra-body-strong)]
 *   bg-[image:var(--dra-hero-bg)]    shadow-[var(--dra-shadow-cta)]
 * No class definitions here (css/input.css holds the few element-level base rules).
 *
 * Changelog:
 * 2026-10-15 - In-place Update (values only), owner-approved AI-review decision: four
 *              design colours failed WCAG AA contrast (Lighthouse color-contrast, 25 nodes)
 *              and were darkened by the minimum that passes, same hue:
 *                --secondary-text-color  #5b7ca3 -> #56769a   (4.13-4.32 -> >= 4.50)
 *                --tertiary-text-color   #6b88aa -> #5a799d   (3.66      -> 4.51)
 *                --accent-text-color     #2b8ae0 -> #1d76c6   (small text 3.45-3.61 -> 4.50)
 *                --fourth-color          #2489e3 -> #1a79cd   (card 02; white body 4.51)
 *              --accent-color stays #2b8ae0 for fills, icons and LARGE display text (which
 *              passes the 3:1 large-text bar). The design-fidelity reference was corrected to
 *              match: spec/design/DeepRootAlpha.a11y.html (see spec/design/README.md).
 * 2026-10-15 - In-place: --header-text-size corrected to the design's
 *              clamp(13px,1.1vw,17px) (was transcribed as its 17px max); added
 *              --dra-radius-hair / -tile / -panel / -band for the four design radii
 *              with no canonical slot (found while mapping the header + page);
 *              --dra-radius-card + --dra-shadow-form for the contact form card.
 * v1.0.0 - 2026-10-15 - Bootstrap-new for DeepRootAlpha. Replaces the previous
 *                       theme_v1.0.0.css that came over with the framework port.
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════
   * 1. Brand colors                                              [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-color: #0b3a6a;        /* navy: primary CTA, capabilities card 01, step badges */
  --secondary-color: #0f3d6b;      /* ink navy: headings, nav, wordmark "DeepRoot" */
  --tertiary-color: #1a6fc0;       /* strategies h2 accent line */
  --fourth-color: #1a79cd;         /* capabilities card 02 fill — design #2489e3, AA (owner, 2026-10-15) */
  --fifth-color: #f8fafc;          /* soft section surface */
  --sixth-color: #eef4fb;          /* pale tint: process numeral disc */
  --accent-color: #2b8ae0;         /* accent blue: eyebrows, wordmark "Alpha", links */
  --accent-soft-color: #eef5fd;    /* icon-tile tint, focus-ring fill */

  /* ═══════════════════════════════════════════════════════════════════════
   * 2. Status colors                                       [STRUCTURAL]
   * The design shows no status states. Conventional values, kept harmonious
   * with the navy palette; used by the contact form's error/success notice.
   * ═════════════════════════════════════════════════════════════════════ */
  --error-color: #c8463d;
  --warning-color: #d9a21b;
  --success-color: #2e8b57;
  --info-color: #2b8ae0;
  --orange-color: #F97316;
  --purple-color: #A855F7;
  --hyperlink-text-color: #2b8ae0;

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

  /* ═══════════════════════════════════════════════════════════════════════
   * 4. Text colors                                              [BRAND]
   * ═════════════════════════════════════════════════════════════════════ */
  --primary-text-color: #0f3d6b;   /* headings, labels, nav */
  --secondary-text-color: #56769a; /* body copy — design #5b7ca3, darkened to pass WCAG AA (owner, 2026-10-15) */
  --tertiary-text-color: #5a799d;  /* card body, framework copy — design #6b88aa, AA (owner, 2026-10-15) */
  --inverse-text-color: #fff;
  --accent-text-color: #1d76c6;    /* SMALL accent text — design #2b8ae0, AA (owner, 2026-10-15); large display text uses --accent-color */
  --hover-text-color: #0b3a6a;     /* design <style>: a:hover{color:#0b3a6a} */
  --default-primary-text-color: #0f3d6b;
  --default-secondary-text-color: #fff;

  /* ═══════════════════════════════════════════════════════════════════════
   * 5. Borders                                             [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --default-border: 1px solid #e3e9f0;
  --primary-border-color: #e3e9f0;
  --secondary-border-color: #edf1f6;
  --default-border-radius: 14px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 6. Border radius scale                                 [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --border-radius-xs: 4px;         /* strategy cards */
  --border-radius-md: 12px;        /* icon tiles, capability cards */
  --border-radius-lg: 20px;        /* framework card */
  --border-radius-full: 9999px;    /* pill CTAs, nav bar, numeral discs */

  /* ═══════════════════════════════════════════════════════════════════════
   * 7. Text size scale                                     [STRUCTURAL]
   * The design sets exact px sizes; the ladder mirrors its body steps.
   * ═════════════════════════════════════════════════════════════════════ */
  --xl-text-size: 24px;
  --lg-text-size: 20px;
  --md-text-size: 18px;
  --sm-text-size: 16px;
  --xs-text-size: 14px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 8. Font weight                                         [STRUCTURAL]
   * Inter ships 300/400/500/600 in the bundle — nothing heavier is loaded.
   * ═════════════════════════════════════════════════════════════════════ */
  --default-font-weight-thin: 300;
  --default-font-weight-medium: 400;
  --default-font-weight-thick: 500;
  --default-font-weight-bold: 600;
  --default-font-weight-max: 600;

  /* ═══════════════════════════════════════════════════════════════════════
   * 9. Font family                                         [STRUCTURAL]
   * ═════════════════════════════════════════════════════════════════════ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Courier New', monospace;

  /* ═══════════════════════════════════════════════════════════════════════
   * 10. Shadow                                             [STRUCTURAL]
   * Navy-tinted, as every shadow in the design is.
   * ═════════════════════════════════════════════════════════════════════ */
  --shadow-sm: 0 4px 20px rgba(15, 61, 107, 0.03);   /* "How We Operate" cards */
  --shadow-md: 0 4px 24px rgba(15, 61, 107, 0.06);   /* nav bar */
  --shadow-lg: 0 20px 50px rgba(15, 61, 107, 0.08);  /* framework card */

  /* ═══════════════════════════════════════════════════════════════════════
   * 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]
   * The nav is a white 82px pill floating inside the hero, not a full bar.
   * ═════════════════════════════════════════════════════════════════════ */
  --header-height: 82px;
  --js-header-height: 82px;
  --header-bg-color: #fff;
  --header-text-size: clamp(13px, 1.1vw, 17px);   /* nav links scale with the viewport */
  --header-text-color: #0f3d6b;
  --header-hover-color: #2b8ae0;

  /* ═══════════════════════════════════════════════════════════════════════
   * 13. Footer                                                  [BRAND]
   * Light footer; its vertical gradient is --dra-footer-bg.
   * ═════════════════════════════════════════════════════════════════════ */
  --footer-bg-color: #f7f9fc;
  --footer-text-size: 14px;
  --footer-text-color: #5b6f86;
  --footer-hover-color: #2b8ae0;

  /* ═══════════════════════════════════════════════════════════════════════
   * 14. Button                                                  [BRAND]
   * primary   = navy pill ("EXPLORE OUR APPROACH")
   * secondary = glass outline pill ("DISCOVER OUR STRATEGIES")
   * tertiary  = white pill on the blue band ("Explore Investment Opportunities")
   * The design specifies no hover states; hovers step one shade along the
   * design's own navy ramp.
   * ═════════════════════════════════════════════════════════════════════ */
  --btn-primary-bg-color: #0b3a6a;
  --btn-secondary-bg-color: rgba(255, 255, 255, 0.4);
  --btn-tertiary-bg-color: #fff;
  --btn-disabled-bg-color: #e3e9f0;
  --btn-primary-hover-bg-color: #0e4d87;
  --btn-secondary-hover-bg-color: #fff;
  --btn-tertiary-hover-bg-color: #eef4fb;
  --btn-primary-text-color: #fff;
  --btn-secondary-text-color: #0f3d6b;
  --btn-tertiary-text-color: #0f3d6b;
  --btn-disabled-text-color: #8a98a8;
  --btn-primary-hover-text-color: #fff;
  --btn-secondary-hover-text-color: #0f3d6b;
  --btn-tertiary-hover-text-color: #0f3d6b;
  --btn-width-long: 200px;
  --btn-width-short: 100px;
  --btn-border-radius: 9999px;
  --btn-border: 1px solid #d3dde8;
  --btn-font-size: 14px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 15. Input                                              [STRUCTURAL]
   * From the Contact form.
   * ═════════════════════════════════════════════════════════════════════ */
  --input-label-size: 14px;
  --input-text-size: 14px;
  --input-border-radius: 6px;
  --input-border: 1px solid #dfe5ec;
  --input-bg-color: #f8fafc;
  --input-width-long: 100%;
  --input-width-short: 200px;
  --input-placeholder-size: 14px;
  --input-placeholder-color: #8a98a8;
  --input-disabled-bg-color: #edf1f6;
  --input-focus-border-color: var(--accent-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]
   * Unused by the design; brand-coherent values for any future table.
   * ═════════════════════════════════════════════════════════════════════ */
  --listing-header-bg-color: #eef4fb;
  --listing-header-text-color: #0f3d6b;
  --listing-row-primary-color: #f8fafc;
  --listing-row-secondary-color: #fff;
  --listing-row-child-primary-color: #eef5fd;
  --listing-row-child-secondary-color: #eef5fd;
  --listing-header-text-size: 14px;
  --listing-row-text-size: 14px;
  --listing-header-child-text-size: 14px;
  --listing-row-child-text-size: 14px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 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-sm);
  --card-padding: 32px;

  /* ═══════════════════════════════════════════════════════════════════════
   * 18. Modal                                              [STRUCTURAL]
   * Used by the contact form's sent/failed notice.
   * ═════════════════════════════════════════════════════════════════════ */
  --modal-overlay-color: rgba(11, 58, 106, 0.45);
  --modal-bg-color: #fff;
  --modal-border-radius: 16px;
  --modal-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);

  /* ═══════════════════════════════════════════════════════════════════════
   * 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 — prefix --dra-* (DeepRootAlpha design system)
   * Declared by the owner 2026-10-15 (build-theme Step 0, path (c) Extend).
   * Each token mirrors one design element that no canonical slot fits.
   * ═════════════════════════════════════════════════════════════════════ */

  /* Text ladder beyond the canonical three */
  --dra-accent-strong:   #1a6fc0;                 /* strategies h2, line 2 */
  --dra-accent-bright:   #3a95e6;                 /* eyebrow + "01 —" on dark */
  --dra-accent-pale:     #cfe5fa;                 /* "02 —" on the blue card */
  --dra-body-strong:     #4f6f96;                 /* About lead paragraph */
  --dra-body-muted:      #7690af;                 /* hero second paragraph */
  --dra-tagline:         #3f5f86;                 /* footer tagline */
  --dra-legal:           #8a98a8;                 /* copyright line */
  --dra-numeral:         #b5c6da;                 /* About 01/02/03 numerals */
  --dra-on-dark-88:      rgba(255, 255, 255, 0.88); /* contact lead, card 02 body */
  --dra-on-dark-80:      rgba(255, 255, 255, 0.8);  /* card 01 body */
  --dra-on-dark-72:      rgba(255, 255, 255, 0.72); /* contact second paragraph */

  /* Surfaces */
  --dra-surface-faint:   #fafbfd;                 /* process step panels */
  --dra-tile-neutral:    #eff2f6;                 /* "Risk Discipline" icon tile */
  --dra-tile-strategy:   #e8f0f9;                 /* strategy-card icon tiles */
  --dra-glass-60:        rgba(255, 255, 255, 0.6);  /* About quote card */

  /* Borders */
  --dra-line-faint:      #f0f3f7;                 /* "How We Operate" card border */
  --dra-line-card:       #eef2f7;                 /* strategy-card border */
  --dra-line-quote:      #e6ecf3;                 /* quote-card border */
  --dra-line-divider:    #eef2f6;                 /* framework column divider */
  --dra-line-tile:       #dde9f7;                 /* icon-tile border */
  --dra-line-rail:       #d5dde6;                 /* process connector line */
  --dra-line-section:    #e9eff5;                 /* capabilities top rule */

  /* Composite backgrounds — the design's gradient stacks, verbatim */
  --dra-hero-bg:
    radial-gradient(600px 500px at 90% 25%, #e6eef8 0%, transparent 70%),
    radial-gradient(400px 400px at 6% 85%, #eceff3 0%, transparent 70%),
    linear-gradient(180deg, #f3f7fc 0%, #f8fafc 100%);
  --dra-about-bg:        linear-gradient(90deg, #fff 60%, #f6f8fb 100%);
  --dra-grid-bg:
    linear-gradient(rgba(15, 61, 107, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 61, 107, 0.025) 1px, transparent 1px);
  --dra-strategies-bg:
    radial-gradient(500px 340px at 62% 18%, rgba(43, 138, 224, 0.09), transparent 70%),
    linear-gradient(rgba(15, 61, 107, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 61, 107, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, #fff, #eef4fb);
  --dra-strategies-base: #f7fafd;
  --dra-framework-band:  linear-gradient(90deg, #0b3a6a, #0e5b98);
  --dra-objective-band:  linear-gradient(135deg, #0b3a6a 0%, #0f5a96 45%, #0b3a6a 100%);
  --dra-quote-band:
    radial-gradient(500px 260px at 30% 80%, rgba(5, 30, 60, 0.35), transparent 70%),
    linear-gradient(160deg, #0b3a6a 0%, #0d4479 50%, #1c78cf 85%, #2d90e6 100%);
  --dra-contact-bg:
    radial-gradient(600px 500px at 85% 30%, rgba(43, 138, 224, 0.25), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #0b3c6c, #0e4d87 50%, #0b3c6c);
  --dra-contact-base:    #0d4377;
  --dra-footer-bg:       linear-gradient(180deg, #f7f9fc, #fbfcfd);

  /* Rules + ornaments */
  --dra-rule-accent:     linear-gradient(90deg, #2b8ae0, rgba(43, 138, 224, 0.15) 70%, transparent);
  --dra-rule-steel:      linear-gradient(90deg, #8aa0b8, rgba(138, 160, 184, 0.2) 80%, transparent);
  --dra-fade-in:         linear-gradient(90deg, transparent, #2b8ae0);
  --dra-fade-out:        linear-gradient(90deg, #2b8ae0, transparent);

  /* Shadows beyond the canonical three */
  --dra-shadow-cta:      0 8px 20px rgba(11, 58, 106, 0.25);  /* navy pill CTA */
  --dra-shadow-node:     0 4px 14px rgba(15, 61, 107, 0.06);  /* process numeral ring */
  --dra-shadow-band:     0 30px 60px rgba(11, 58, 106, 0.22); /* objective band */
  --dra-shadow-form:     0 30px 60px rgba(0, 0, 0, 0.18);     /* contact form card */

  /* Radii with no canonical slot (pills use --border-radius-full: a 41px / 26px /
     28px radius on an element twice that tall renders identically to 9999px) */
  --dra-radius-hair:     2px;      /* nav active underline */
  --dra-radius-tile:     8px;      /* strategy icon tiles */
  --dra-radius-panel:    10px;     /* process step panels */
  --dra-radius-band:     24px;     /* objective + quote bands */
  --dra-radius-card:     16px;     /* contact form card */

  /* Chrome metrics */
  --dra-shell-max:       1232px;   /* nav, strategies, footer */
  --dra-content-max:     1104px;   /* about, process, capabilities, contact */
}