/* ============================================================
   IBGSR LIGHT THEME  —  white-dominant, gold / olive / red accents
   Loaded last, after premium.css. Two jobs:
     1. Define the brand palette the tokenised Tailwind build reads from.
     2. Convert the remaining dark surfaces to light, and remap the
        white text inside them to ink.
   ============================================================ */

:root {
  /* --- Palette ------------------------------------------------ */
  --ibg-base:        #ffffff;   /* page ground                    */
  --ibg-surface:     #fafaf7;   /* alternating bands, cards       */
  --ibg-surface-2:   #f4f4ef;   /* deeper band                    */
  --ibg-ink:         #1a1d1b;   /* body text                      */
  --ibg-ink-muted:   #5a625e;   /* secondary text                 */
  /* Two golds. On the old dark-green ground a single bright gold worked for
     everything; on white it only reaches 3.1:1, below the 4.5:1 needed for
     text. So text and CTAs use the deeper gold, and the bright one is kept
     for decoration that carries no text - rules, glows, icon chips. */
  --ibg-gold:        #8f6620;   /* text, links, CTA grounds  5.14:1 on white */
  --ibg-gold-deep:   #7d5618;   /* hover                     6.53:1 on white */
  --ibg-gold-bright: #b98a34;   /* decorative fills only, never behind text  */
  --ibg-gold-onDark: #d4aa55;   /* gold on the olive footer  5.51:1          */
  --ibg-olive:       #5a6b4a;   /* secondary accent               */
  --ibg-olive-deep:  #2f3a27;   /* footer ground                  */
  --ibg-red:         #a32b22;   /* alerts, emphasis only          */
  --ibg-hairline:    #e6e4dc;   /* borders                        */

  /* --- Tokens consumed by the compiled Tailwind build ---------- */
  /* space-separated, for rgb(<var> / <alpha>) */
  --ibg-primary-rgb:   26 29 27;      /* was 9 38 31    - now ink   */
  --ibg-gold-rgb:      143 102 32;    /* #8f6620 - drives text/bg/border-accent */
  --ibg-gold-deep-rgb: 125 86 24;     /* #7d5618 - accent hover                 */
  --ibg-ink-rgb:       26 29 27;
  --ibg-ink-2-rgb:     90 98 94;
  --ibg-ink-3-rgb:     105 113 109;   /* 5.02:1 on white, 4.80:1 on surface */
  --ibg-surface-rgb:   250 250 247;
  --ibg-border-rgb:    230 228 220;
  /* comma-separated, for legacy rgba(<var>, <alpha>) */
  --ibg-primary-c:     26, 29, 27;
  --ibg-gold-c:        143, 102, 32;
}

html, body { background: var(--ibg-base); }

/* ============================================================
   1. Dark surfaces -> light
   `footer` and anything opted out with .keep-dark are excluded.
   ============================================================ */

.bg-primary-dark:not(footer):not(.keep-dark) {
  background-color: var(--ibg-surface) !important;
}

/* Fractional variants (bg-primary-dark/88 etc.) are image overlays, not section
   grounds. Painting them a solid surface colour hid the photography completely
   and left inner-page heroes as an empty white band, so they become a white
   wash instead - the picture still reads, the ink text on top stays legible.
   The ::after gradient in premium.css layers on top of this. */
[class*="bg-primary-dark/"]:not(footer):not(.keep-dark) {
  background-color: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Gradient scrims are deliberately left dark. They sit *over photographs*
   to make a white caption readable - whitening them puts white text on a
   white wash. The page ground around them is already white, so a dark
   scrim on the image itself reads as intended, not as a dark section.
   The only exception is the full-bleed inner-page hero, handled by the
   ::after rule in premium.css. */

/* ============================================================
   2. Text and borders inside those now-light surfaces
   Descendant selectors (0,2,0) outrank Tailwind's single-class
   rules (0,1,0), so no !important is needed here.
   ============================================================ */

.bg-primary-dark:not(footer):not(.keep-dark) .text-white,
[class*="bg-primary-dark/"]:not(footer):not(.keep-dark) .text-white,
.bg-primary-dark:not(footer):not(.keep-dark) h1,
.bg-primary-dark:not(footer):not(.keep-dark) h2,
.bg-primary-dark:not(footer):not(.keep-dark) h3 {
  color: var(--ibg-ink);
}

.bg-primary-dark:not(footer):not(.keep-dark) [class*="text-white/"],
[class*="bg-primary-dark/"]:not(footer):not(.keep-dark) [class*="text-white/"] {
  color: var(--ibg-ink-muted);
}

.bg-primary-dark:not(footer):not(.keep-dark) [class*="border-white/"],
[class*="bg-primary-dark/"]:not(footer):not(.keep-dark) [class*="border-white/"] {
  border-color: var(--ibg-hairline);
}

.bg-primary-dark:not(footer):not(.keep-dark) [class*="bg-white/"],
[class*="bg-primary-dark/"]:not(footer):not(.keep-dark) [class*="bg-white/"] {
  background-color: rgba(26, 29, 27, 0.04);
}

/* Outline button was drawn in white for dark grounds. */
.btn-outline-white:not(footer .btn-outline-white) {
  color: var(--ibg-ink);
  border-color: var(--ibg-gold);
}
.btn-outline-white:not(footer .btn-outline-white):hover {
  background-color: var(--ibg-gold);
  color: #fff;
  border-color: var(--ibg-gold);
}

/* ============================================================
   3. Header — stays white, including when scrolled
   ============================================================ */

header.premium-scrolled {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: var(--ibg-hairline) !important;
  box-shadow: 0 6px 28px rgba(26, 29, 27, 0.07) !important;
}
header.premium-scrolled .hidden.lg\:flex > div > a:not(.btn-primary) {
  color: var(--ibg-ink) !important;
}
header.premium-scrolled .hidden.lg\:flex > div > a:not(.btn-primary):hover {
  color: var(--ibg-gold) !important;
}
header.premium-scrolled .btn-primary {
  color: #fff !important;
  background-color: var(--ibg-gold) !important;
  border-color: var(--ibg-gold) !important;
}

/* ============================================================
   4. Footer — the one dark anchor, retinted deep olive
   ============================================================ */

footer,
footer.bg-primary-dark,
footer [class*="bg-primary-dark"] {
  background-color: var(--ibg-olive-deep) !important;
  background-image: none !important;
}
footer .text-accent,
footer [class*="text-accent"],
footer .eyebrow { color: var(--ibg-gold-onDark) !important; }
footer a:hover { color: #e6c77c !important; }

/* ============================================================
   5. Accent roles — olive as secondary, red for emphasis
   ============================================================ */

.eyebrow { color: var(--ibg-gold); }
.text-olive   { color: var(--ibg-olive); }
.bg-olive     { background-color: var(--ibg-olive); }
.border-olive { border-color: var(--ibg-olive); }
.text-red     { color: var(--ibg-red); }
.bg-red-soft  { background-color: rgba(163, 43, 34, 0.08); }
.border-red   { border-color: var(--ibg-red); }

/* Section dividers pick up olive rather than green-black. */
hr, .divider { border-color: var(--ibg-hairline); }

/* Custom cursor follows the gold accent on a light ground. */
#premium-cursor { mix-blend-mode: multiply; }


/* ============================================================
   6. Decorative gold — the bright value, only where no text sits on it
   ============================================================ */
.eyebrow::before,
hr.gold-rule,
.dark-panel.ml-auto {
  border-color: var(--ibg-gold-bright);
}

/* Footer eyebrow uses a gold shimmer via background-clip, so a plain
   color rule cannot reach it — the gradient itself has to be relit
   for the dark olive ground. */
footer .eyebrow {
  background: linear-gradient(90deg, #e6c77c, var(--ibg-gold-onDark), #e6c77c) !important;
  background-size: 200% !important;
}

/* ============================================================
   7. CTA accent band
   One deliberate dark moment mid-page, in olive. The text inside is a
   sibling of this overlay rather than a descendant, so it keeps the
   white treatment it already had.
   ============================================================ */
.cta-band-overlay {
  background-color: rgba(47, 58, 39, 0.90);
}

/* ============================================================
   8. LinkedIn feed fallback
   The markup asks for `bg-gradient-to-br from-primary-dark to-[#0b2c24]`,
   but `to-[#0b2c24]` was never emitted by the Tailwind build (the class was
   hand-added after export), so the element resolved to no background at all
   and its white text was invisible. Given a real ground here.
   ============================================================ */
.linkedin-feed-fallback {
  background-image: linear-gradient(135deg, #2f3a27 0%, #3d4a33 100%) !important;
}
.linkedin-feed-fallback .text-accent,
.linkedin-feed-fallback [class*="text-accent"] { color: var(--ibg-gold-onDark) !important; }

/* ============================================================
   9. Homepage + inner-page hero wash
   The full-bleed hero scrim is the one gradient that must go light: its
   heading is inside a .bg-primary-dark section, so the text remap above
   already turned it to ink, and a dark scrim would leave ink on near-black.
   It is identified by the /95 stop, which only the hero uses - photo
   caption scrims (/20 /30 /40 /50 /60) stay dark and keep their white text.
   ============================================================ */
[class*="from-primary-dark/95"] {
  --tw-gradient-from: rgba(255, 255, 255, 0.92) var(--tw-gradient-from-position) !important;
  --tw-gradient-via:  rgba(255, 255, 255, 0.52) var(--tw-gradient-via-position)  !important;
  --tw-gradient-to:   rgba(255, 255, 255, 0.04) var(--tw-gradient-to-position)   !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The gold radial over the hero reads as a muddy stain on a white wash. */
[class*="from-primary-dark/95"] + [class*="radial-gradient"] { opacity: 0.55; }

/* ============================================================
   10. Hero stats panel
   "CORPORATE GOVERNANCE" broke as "GOVERNANC / E" - a 3-column grid at
   11px with 0.16em tracking leaves no room for the longest label.
   ============================================================ */
.dark-panel .grid.grid-cols-3 > div > p:first-child {
  letter-spacing: 0.08em;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.dark-panel .grid.grid-cols-3 { gap: 0.75rem; }