/* ====================================================================
   Carnett's MCCW Operations — Shared brand stylesheet
   --------------------------------------------------------------------
   Single source of truth for brand tokens. Every module's <head> links
   this file BEFORE its own inline <style> so module-level CSS variables
   can override these where needed.

   Aesthetic direction: clean, modern, readable. Brand palette applied
   as gradients + accents, not as solid all-caps blocks. Body type stays
   sentence-case for legibility on dense ops screens; uppercase is
   reserved for small eyebrow labels and tiny section headers only.
   ==================================================================== */

:root {
  /* ----- Brand palette (screen-tuned) ----------------------------- */
  --brand-cyan:        #00B9F2;   /* light blue — primary */
  --brand-cyan-dark:   #0096C7;
  --brand-navy:        #005BAA;   /* dark blue — complementary */
  --brand-navy-dark:   #00417F;
  --brand-navy-deep:   #122648;   /* platform bar / darkest navy */
  --brand-red:         #EE3124;   /* contrast — accents, alerts */
  --brand-red-dark:    #C81E12;
  --brand-red-deep:    #C8202F;   /* near-dup of red-dark; consolidate at rebrand */
  --brand-yellow:      #FFCB05;   /* contrast — warnings, call-outs */
  --brand-yellow-dark: #D9AB00;

  /* ----- Surface neutrals ---------------------------------------- */
  --brand-white:       #FFFFFF;
  --brand-ink:         #1A1A1A;
  --brand-ink-soft:    #4B5563;
  --brand-grey:        #666666;
  --brand-border:      #E2E8F0;
  --brand-bg-1:        #f5f8fc;
  --brand-bg-2:        #e8f0f8;
  --brand-row-hover:   #F1F7FC;

  /* ----- Semantic (kept for status only) ------------------------- */
  --brand-good-bg:     #E6F4EA;
  --brand-good-fg:     #1E7B3A;
  --brand-warn-bg:     rgba(255, 203, 5, 0.18);
  --brand-warn-fg:     #8C6A00;
  --brand-bad-bg:      rgba(238, 49, 36, 0.10);
  --brand-bad-fg:      #9C0006;

  /* ----- Typography ---------------------------------------------- */
  --brand-font-body:    'Segoe UI', 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;
  --brand-font-display: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial,
                        sans-serif;

  /* ----- Surface tokens ------------------------------------------ */
  --brand-radius:       8px;
  --brand-radius-lg:    12px;
  --brand-radius-pill:  999px;
  --brand-shadow-sm:    0 1px 3px rgba(0, 91, 170, 0.06);
  --brand-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --brand-shadow-lg:    0 6px 18px rgba(0, 0, 0, 0.12);

  /* ----- Brand gradient ------------------------------------------ */
  --brand-header-gradient:
       linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-cyan) 100%);
  --brand-bg-gradient:
       linear-gradient(135deg, var(--brand-bg-1) 0%, var(--brand-bg-2) 100%);
}

/* ====================================================================
   Reusable utility classes
   --------------------------------------------------------------------
   Opt-in: a module gets these only by adding the class. Bare elements
   keep their existing styling unless they ask for these.
   ==================================================================== */

.brand-eyebrow {
  font-family: var(--brand-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color: var(--brand-navy);
}

.brand-display {
  font-family: var(--brand-font-display);
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  color: var(--brand-navy);
}

/* ----- Pill buttons --------------------------------------------------- */
.brand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 18px;
  font-family: var(--brand-font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--brand-white);
  background: var(--brand-navy);
  border: 1px solid var(--brand-navy);
  border-radius: var(--brand-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.06s;
}
.brand-btn:hover  { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); transform: translateY(-1px); }
.brand-btn:active { transform: translateY(0); }

.brand-btn.cyan   { background: var(--brand-cyan); border-color: var(--brand-cyan); }
.brand-btn.cyan:hover  { background: var(--brand-cyan-dark); border-color: var(--brand-cyan-dark); }

.brand-btn.red    { background: var(--brand-red); border-color: var(--brand-red); }
.brand-btn.red:hover   { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }

/* Translucent ghost button — for use on the dark gradient header */
.brand-btn.ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--brand-white);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.brand-btn.ghost-light:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}

/* Outline ghost — for light backgrounds */
.brand-btn.ghost {
  background: transparent;
  color: var(--brand-navy);
  border-color: var(--brand-border);
}
.brand-btn.ghost:hover {
  background: var(--brand-row-hover);
  border-color: var(--brand-navy);
}

/* ----- Logo lockup ---------------------------------------------------- */
.brand-logo-img {
  display: block;
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
