/* ==========================================================================
   BankSupplies brand tokens (v1.0.0)
   Source: BankSupplies Brand Guidelines PDF. The "Website Hex Colors" page is
   the source of truth for screen work. Values marked DERIVED are not in the
   PDF; they were added so text meets WCAG AA. Verify any new pairing with
   scripts/check_contrast.py.

   Usage:
     <link rel="stylesheet" href="brand.css">
     <html data-brand="bsi">            BankSupplies (default)
     <html data-brand="mmf">            MMF Industries
     <html data-brand="steelmaster">    Steelmaster
     <html data-brand="fortknox">       Fort Knox Deposit Bags
     <html data-theme="dark">           force dark ("light" forces light)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Oswald:wght@400;500;600;700&display=swap");

:root {
  /* ---- Raw palette: BankSupplies, web (do not use directly in components) */
  --bsi-dark-blue:    #1C5A7D;  /* primary. Print PMS 7700C = #185A7D */
  --bsi-medium-blue:  #0084C8;  /* PMS Medium Blue U. Fails AA as text on white */
  --bsi-light-blue:   #5F8BA4;  /* web. Print PMS 7454C = #5F8DB5. Large text/UI only */
  --bsi-orange:       #F9A158;  /* web accent. Never as text on light backgrounds */
  --bsi-grey-dark:    #626466;
  --bsi-grey-mid:     #C9C9C9;
  --bsi-grey-light:   #E6E6E6;

  /* Print main/secondary colors: for charts and illustrations, not UI chrome */
  --bsi-red-dark:     #A73439;  /* PMS 1807C */
  --bsi-red:          #E1251B;  /* PMS 485C */
  --bsi-green:        #00B451;  /* PMS 7481C. Fails AA as text */
  --bsi-orange-print: #FF7F40;  /* PMS 164C */
  --bsi-purple:       #702C63;  /* PMS 7657C */

  /* ---- Typography -------------------------------------------------------- */
  --font-heading: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --heading-transform: uppercase;   /* guidelines set headings in Oswald caps */
  --heading-tracking:  0.01em;
  --heading-weight:    500;
  --body-weight:       400;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;
  --leading-body: 1.6;
  --leading-heading: 1.15;

  /* ---- Shape & spacing --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;   /* the "B" symbol is always a circle */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --shadow-sm: 0 1px 2px rgb(15 37 51 / 0.08);
  --shadow-md: 0 4px 12px rgb(15 37 51 / 0.12);

  /* ---- Logo minimum sizes (PDF inches × 96 CSS px) ----------------------- */
  --logo-wordmark-min:     96px;  /* BankSupplies wordmark, 1in */
  --logo-symbol-min:       24px;  /* "B" circle symbol, 0.25in */
  --logo-mmf-min:          48px;  /* 0.5in */
  --logo-steelmaster-min:  72px;  /* 0.75in */
  --logo-fortknox-min:     72px;  /* 0.75in */
}

/* ==========================================================================
   Semantic tokens. Components use THESE, never the raw palette.
   ========================================================================== */

/* ---- BankSupplies, light (default) --------------------------------------- */
:root,
[data-brand="bsi"] {
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F5F5;   /* DERIVED, between white and grey-light */
  --color-surface-sunken: var(--bsi-grey-light);
  --color-surface-inverse:var(--bsi-dark-blue);

  --color-text:           #1F2327;   /* DERIVED near-black for long-form body */
  --color-text-muted:     var(--bsi-grey-dark);
  --color-text-inverse:   #FFFFFF;
  --color-heading:        var(--bsi-dark-blue);

  --color-primary:        var(--bsi-dark-blue);
  --color-primary-hover:  #154560;   /* DERIVED, dark blue −25% */
  --color-on-primary:     #FFFFFF;
  --color-secondary:      var(--bsi-light-blue);  /* fills, large text, icons */
  --color-on-secondary:   #FFFFFF;                /* large/bold text only */
  --color-accent:         var(--bsi-orange);      /* highlights, badges, CTAs */
  --color-on-accent:      #1F2327;

  --color-link:           #0076B3;   /* DERIVED, medium blue darkened to pass AA */
  --color-link-hover:     var(--bsi-dark-blue);
  --color-focus-ring:     var(--bsi-medium-blue);

  --color-border:         var(--bsi-grey-mid);
  --color-border-strong:  #8A8C8E;   /* DERIVED, passes 3:1 for UI borders */
  --color-divider:        var(--bsi-grey-light);

  --color-success:        var(--bsi-green);   /* fills/icons */
  --color-success-text:   #00733A;            /* DERIVED */
  --color-warning:        var(--bsi-orange);
  --color-warning-text:   #9A4A00;            /* DERIVED */
  --color-danger:         var(--bsi-red);
  --color-danger-text:    var(--bsi-red-dark);
  --color-info:           var(--bsi-medium-blue);
  --color-info-text:      #0076B3;

  /* Chart series in order. Main colors first, then secondary. */
  --chart-1: var(--bsi-dark-blue);
  --chart-2: var(--bsi-orange);
  --chart-3: var(--bsi-light-blue);
  --chart-4: var(--bsi-medium-blue);
  --chart-5: var(--bsi-grey-dark);
  --chart-6: var(--bsi-purple);
  --chart-7: var(--bsi-green);
  --chart-8: var(--bsi-red-dark);

  --brand-heading-color: var(--color-heading);
  color-scheme: light;
}

/* ---- BankSupplies, dark (all DERIVED, not in the guidelines) ------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-brand="mmf"]):not([data-brand="steelmaster"]):not([data-brand="fortknox"]) {
    --color-surface:        #0F2533;
    --color-surface-alt:    #173447;
    --color-surface-sunken: #0A1A24;
    --color-surface-inverse:#1C5A7D;   /* brand band stays dark blue; white logo on top */
    --color-text:           #E6E6E6;
    --color-text-muted:     #AEB4B8;
    --color-text-inverse:   #FFFFFF;
    --color-heading:        #9CC3DB;
    --color-primary:        #7FAFCB;
    --color-primary-hover:  #9CC3DB;
    --color-on-primary:     #0F2533;
    --color-secondary:      var(--bsi-light-blue);
    --color-accent:         var(--bsi-orange);
    --color-on-accent:      #0F2533;
    --color-link:           #6DB8E6;
    --color-link-hover:     #9CC3DB;
    --color-border:         #2C4A5E;
    --color-border-strong:  #5F8BA4;
    --color-divider:        #1E3B4F;
    --color-success-text:   #4FD08A;
    --color-warning-text:   var(--bsi-orange);
    --color-danger-text:    #F28B85;
    --color-info-text:      #6DB8E6;
    --chart-1: #7FAFCB;
    --chart-5: #AEB4B8;
    --chart-6: #B57AAB;   /* purple lightened for navy */
    --chart-8: #D9696E;   /* dark red lightened for navy */
    color-scheme: dark;
  }
}
:root[data-theme="dark"]:not([data-brand="mmf"]):not([data-brand="steelmaster"]):not([data-brand="fortknox"]) {
  --color-surface:        #0F2533;
  --color-surface-alt:    #173447;
  --color-surface-sunken: #0A1A24;
  --color-surface-inverse:#1C5A7D;   /* brand band stays dark blue; white logo on top */
  --color-text:           #E6E6E6;
  --color-text-muted:     #AEB4B8;
  --color-text-inverse:   #FFFFFF;
  --color-heading:        #9CC3DB;
  --color-primary:        #7FAFCB;
  --color-primary-hover:  #9CC3DB;
  --color-on-primary:     #0F2533;
  --color-secondary:      var(--bsi-light-blue);
  --color-accent:         var(--bsi-orange);
  --color-on-accent:      #0F2533;
  --color-link:           #6DB8E6;
  --color-link-hover:     #9CC3DB;
  --color-border:         #2C4A5E;
  --color-border-strong:  #5F8BA4;
  --color-divider:        #1E3B4F;
  --color-success-text:   #4FD08A;
  --color-warning-text:   var(--bsi-orange);
  --color-danger-text:    #F28B85;
  --color-info-text:      #6DB8E6;
  --chart-1: #7FAFCB;
  --chart-5: #AEB4B8;
  --chart-6: #B57AAB;   /* purple lightened for navy */
  --chart-8: #D9696E;   /* dark red lightened for navy */
  color-scheme: dark;
}

/* ---- Subsidiaries --------------------------------------------------------
   Fixes vs. the PDF: "Black #FFFFFF" is a typo for #000000; Steelmaster blue
   #608BA4 is normalized to the BSI web light blue #5F8BA4.
   Subsidiary themes are light-only; the guidelines show their dark treatment
   only as white logos on grey #4D5858 panels (use surface-inverse for that). */

[data-brand="mmf"] {
  --mmf-black:  #000000;
  --mmf-yellow: #F5D93F;  /* PMS 7404C */
  --mmf-grey:   #4D5858;  /* PMS 445C */

  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F5F5;
  --color-surface-inverse:var(--mmf-grey);
  --color-text:           #1F2327;
  --color-text-muted:     var(--mmf-grey);
  --color-text-inverse:   #FFFFFF;
  --color-heading:        var(--mmf-grey);
  --color-primary:        var(--mmf-black);
  --color-primary-hover:  var(--mmf-grey);
  --color-on-primary:     #FFFFFF;
  --color-secondary:      var(--mmf-grey);
  --color-on-secondary:   #FFFFFF;
  --color-accent:         var(--mmf-yellow);  /* never as text on white */
  --color-on-accent:      #000000;
  --color-link:           #1F2327;
  --color-link-hover:     var(--mmf-grey);
  --color-focus-ring:     #000000;
  --chart-1: var(--mmf-black);
  --chart-2: var(--mmf-yellow);
  --chart-3: var(--mmf-grey);
  --chart-4: #9AA3A3;
  color-scheme: light;
}

[data-brand="steelmaster"] {
  --sm-black:  #000000;
  --sm-grey:   #4D5858;  /* PMS 445C */
  --sm-orange: #EE7623;  /* PMS 158C */
  --sm-blue:   #5F8BA4;  /* normalized from #608BA4 */

  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F5F5;
  --color-surface-inverse:var(--sm-grey);
  --color-text:           #1F2327;
  --color-text-muted:     var(--sm-grey);
  --color-text-inverse:   #FFFFFF;
  --color-heading:        var(--sm-grey);
  --color-primary:        var(--sm-black);
  --color-primary-hover:  var(--sm-grey);
  --color-on-primary:     #FFFFFF;
  --color-secondary:      var(--sm-blue);
  --color-on-secondary:   #FFFFFF;
  --color-accent:         var(--sm-orange);
  --color-on-accent:      #000000;
  --color-accent-text:    #B5520E;  /* DERIVED, orange darkened for AA text */
  --color-link:           #B5520E;
  --color-link-hover:     #000000;
  --color-focus-ring:     var(--sm-orange);
  --chart-1: var(--sm-black);
  --chart-2: var(--sm-orange);
  --chart-3: var(--sm-blue);
  --chart-4: var(--sm-grey);
  color-scheme: light;
}

/* Fort Knox: the guidelines define logos only (black, or white on color).
   Use a monochrome treatment with the shared BSI type and greys. */
[data-brand="fortknox"] {
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F4F5F5;
  --color-surface-inverse:#4D5858;
  --color-text:           #1F2327;
  --color-text-muted:     var(--bsi-grey-dark);
  --color-text-inverse:   #FFFFFF;
  --color-heading:        #000000;
  --color-primary:        #000000;
  --color-primary-hover:  #4D5858;
  --color-on-primary:     #FFFFFF;
  --color-secondary:      #4D5858;
  --color-on-secondary:   #FFFFFF;
  --color-accent:         var(--bsi-dark-blue);  /* parent-brand tie-in */
  --color-on-accent:      #FFFFFF;
  --color-link:           var(--bsi-dark-blue);
  --color-link-hover:     #000000;
  --color-focus-ring:     #000000;
  color-scheme: light;
}

/* ==========================================================================
   Base element styles (optional; safe to include in new projects).
   ========================================================================== */
.bsi-base,
.bsi-base body {
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  line-height: var(--leading-body);
}
.bsi-base :is(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--heading-tracking);
  text-transform: var(--heading-transform);
  color: var(--color-heading);
}
.bsi-base a { color: var(--color-link); }
.bsi-base a:hover { color: var(--color-link-hover); }
.bsi-base :focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* "Values line": RESPONSIBLE · COLLABORATIVE · ... (Montserrat caps, light blue).
   Light blue is 3.67:1 on white, so this must stay WCAG "large" (>=18.66px bold). */
.bsi-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}