/* ============================================================================
   FTW! Design System -- theme override color classes
   Navy #08163D / Gold #F4B000, per the FTW! Platform Design System.

   Why a separate file instead of overriding .btn-primary/.btn-secondary
   directly: theme-ox.css ("Last style sheet to be loaded") already owns
   Bootstrap's primary/secondary button colors site-wide (pink/blue), and it
   forces some rules with !important (see the h1-h6 override). Redefining
   .btn-primary here would either lose a specificity fight or force this file
   into the same !important arms race. New, distinctly-named classes side-step
   that entirely and let pages adopt the new theme deliberately, one at a
   time, without an unreviewed site-wide re-skin.

   Same design tokens as wra-assessment.css (a separate, not-yet-merged
   branch) -- intentionally kept in sync so the two consolidate cleanly into
   one shared stylesheet once that branch lands, instead of two independent
   copies of the same navy/gold hex values drifting apart.

   Deliberately COLOR-ONLY: pair these with Bootstrap's own .btn (+ .btn-sm/
   .btn-lg as needed) for sizing/padding/border-radius/etc., e.g.
   class="btn btn-sm ftw-btn-gold". Reinventing button geometry here risked
   silently breaking layouts (narrow grid columns, existing size modifiers)
   that already work correctly via Bootstrap.

   Usage guide (see UserProfile/EditUser.cshtml for the reference case):
   - .ftw-btn-navy    -- the single most important action on the page (e.g.
     the form's own primary submit button, like "Save Profile").
   - .ftw-btn-gold    -- secondary calls to action of roughly equal weight to
     each other (e.g. "Complete my X", a link to another page).
   - .ftw-btn-outline -- "you already did this, click to view/revisit" links.
     Deliberately lighter-weight than a solid button so it doesn't compete
     visually with an actual call to action still awaiting completion.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Design tokens (GitHub #75 -- core_and_status_color_palette.html)

   Exposed as custom properties so pages can reference a token by meaning
   (var(--ftw-alert)) instead of pasting a hex, which is what let the old
   hard-coded #FED109 / #18A0FB values in resume.css drift from the brand in
   the first place. Declared on :root, so they cost nothing until used and
   change no existing pixel on their own.
   --------------------------------------------------------------------------- */
:root {
  /* Core brand */
  --ftw-navy: #08163D;
  --ftw-gold: #F4B000;
  --ftw-bg: #F4F6F9;
  --ftw-card: #FFFFFF;
  --ftw-border: #D8DCE6;
  --ftw-text: #1B2435;

  /* Status -- accent / light tint / dark shade */
  --ftw-success: #15803D;
  --ftw-success-light: #DCEFE2;
  --ftw-success-dark: #0E5228;

  --ftw-info: #2563EB;
  --ftw-info-light: #DDE7FC;
  --ftw-info-dark: #1A4399;

  --ftw-ai: #6D28D9;
  --ftw-ai-light: #E9E0F9;
  --ftw-ai-dark: #461A8C;

  --ftw-construction: #F97316;
  --ftw-construction-light: #FDE5D1;
  --ftw-construction-dark: #9C4A0E;

  --ftw-alert: #DC2626;
  --ftw-alert-light: #FADADA;
  --ftw-alert-dark: #8C1818;

  /* Type. Loaded in _Layout.cshtml; the fallbacks keep every rule readable if
     the Google Fonts request is blocked (school networks, offline dev). */
  --ftw-font-display: "Montserrat", "Poppins", Helvetica, sans-serif;
  --ftw-font-body: "Inter", "Open Sans", "Poppins", Helvetica, sans-serif;
}

/* Type helpers. Per the design system: Montserrat ExtraBold for large numeric
   metrics, Montserrat Bold for section headers, Inter for body copy. */
.ftw-metric {
  font-family: var(--ftw-font-display);
  font-weight: 800;
  color: var(--ftw-navy);
  line-height: 1.1;
}
.ftw-section-heading {
  font-family: var(--ftw-font-display);
  font-weight: 700;
  color: var(--ftw-navy);
}
.ftw-body {
  font-family: var(--ftw-font-body);
  color: var(--ftw-text);
}

/* ---------------------------------------------------------------------------
   Industry palettes (GitHub #75 -- industry_color_palettes.html + industry_icons.docx)

   Each industry gets one class carrying its three colors as local custom
   properties. The consuming element then reads --i-accent / --i-light /
   --i-dark, so a chip, an icon and a left border can all pick up the right
   industry color from a single class on a shared ancestor -- and adding an
   industry later means adding one block here, not touching every component.

   Class name comes from IndustryTheme.CssClass() in
   FTW.WebApp/Helpers/IndustryTheme.cs -- keep the slugs in the two files in
   step.
   --------------------------------------------------------------------------- */
.ftw-industry--default { --i-accent: #08163D; --i-light: #E7E9EF; --i-dark: #08163D; }
.ftw-industry--agriculture { --i-accent: #4C7A3D; --i-light: #E4EEDD; --i-dark: #2F4D26; }
.ftw-industry--architecture-construction { --i-accent: #B4622A; --i-light: #F3E1D3; --i-dark: #733E1A; }
.ftw-industry--banking-finance { --i-accent: #1F6F54; --i-light: #DCEEE8; --i-dark: #124337; }
.ftw-industry--healthcare { --i-accent: #0E7C90; --i-light: #DAEEF1; --i-dark: #094D5A; }
.ftw-industry--marketing-communication { --i-accent: #D6486B; --i-light: #F8DEE4; --i-dark: #872C42; }
.ftw-industry--manufacturing { --i-accent: #5A6472; --i-light: #E3E5E9; --i-dark: #383E47; }
.ftw-industry--human-services { --i-accent: #9C5B8E; --i-light: #EFDFEB; --i-dark: #623A59; }
.ftw-industry--public-service { --i-accent: #2E5C8A; --i-light: #DCE6F0; --i-dark: #1C3A57; }
.ftw-industry--technology { --i-accent: #1C7ED6; --i-light: #DAEAF9; --i-dark: #124D86; }
.ftw-industry--transportation-logistics { --i-accent: #E08A2A; --i-light: #F9E7D1; --i-dark: #8C5619; }
.ftw-industry--education { --i-accent: #4A5FC1; --i-light: #E1E5F6; --i-dark: #2E3B7A; }
.ftw-industry--law-enforcement-military { --i-accent: #6B2C2C; --i-light: #E7DADA; --i-dark: #421B1B; }
.ftw-industry--stem { --i-accent: #6B4FA0; --i-light: #E4DEF0; --i-dark: #433164; }

/* Components that consume the industry variables above. */

/* Icon in its own accent color. FontAwesome duotone renders the secondary
   layer at 40% opacity of the same hue by default, which is exactly the
   accent/tint relationship the palette describes. */
.ftw-industry-icon {
  color: var(--i-accent, var(--ftw-navy));
  --fa-primary-color: var(--i-accent, var(--ftw-navy));
  --fa-secondary-color: var(--i-accent, var(--ftw-navy));
  width: 1.25em;
  text-align: center;
  margin-right: 8px;
}

/* Pill/badge on the light tint with dark-shade text -- the pairing the palette
   was built for, so contrast holds across all 13 without per-industry tuning. */
.ftw-industry-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--i-light, var(--ftw-bg));
  color: var(--i-dark, var(--ftw-text));
  border: 1px solid var(--i-accent, var(--ftw-border));
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--ftw-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.ftw-industry-chip .ftw-industry-icon {
  color: var(--i-dark, var(--ftw-text));
  --fa-primary-color: var(--i-dark, var(--ftw-text));
  --fa-secondary-color: var(--i-accent, var(--ftw-navy));
  margin-right: 6px;
}

/* Wrapping container for a set of chips. */
.ftw-industry-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Not yet engaged" variant: same shape and spacing so the list doesn't
   reflow, drained of color so earned industries stand out. */
.ftw-industry-chip.ftw-industry-chip--muted {
  background-color: transparent;
  color: #8A93A5;
  border-color: var(--ftw-border);
  font-weight: 400;
}
.ftw-industry-chip.ftw-industry-chip--muted .ftw-industry-icon {
  color: #B6BDCA;
  --fa-primary-color: #B6BDCA;
  --fa-secondary-color: #B6BDCA;
}

.ftw-btn-navy {
  color: #fff;
  background-color: #08163D;
  border-color: #08163D;
}
.ftw-btn-navy:hover,
.ftw-btn-navy:focus {
  color: #fff;
  background-color: #060F2E;
  border-color: #060F2E;
}

.ftw-btn-gold {
  color: #08163D;
  background-color: #F4B000;
  border-color: #F4B000;
}
.ftw-btn-gold:hover,
.ftw-btn-gold:focus {
  color: #08163D;
  background-color: #d99900;
  border-color: #d99900;
}

.ftw-btn-outline {
  color: #08163D;
  background-color: transparent;
  border-color: #08163D;
}
.ftw-btn-outline:hover,
.ftw-btn-outline:focus {
  color: #fff;
  background-color: #08163D;
}