/* =========================================================
   Chadwell Supply — Design Tokens
   Source of truth for color, type, spacing, radius, shadow.
   Pulled from Corporate Branding (Colors & Fonts) PDF +
   Website Design System v1.00 + Brand Standards for New Hires.
   ========================================================= */

/* ---------- Brand fonts (self-hosted) ---------- */
/* Open Sans — primary design font (the only family actually applied in the UI,
   via --cw-font-sans). Variable file covers weights 300–800 across widths 75–100%
   (condensed → normal). Served as WOFF2 (≈half the TTF size) with a TTF fallback
   for very old browsers. Regenerate WOFF2 after editing the TTF:
     pip install --user fonttools brotli
     python -c "from fontTools.ttLib import TTFont; f=TTFont('OpenSans-VariableFont_wdth_wght.ttf'); f.flavor='woff2'; f.save('OpenSans-VariableFont_wdth_wght.woff2')"

   The static Condensed / SemiCondensed / Carlito families below remain TTF-only.
   They are declared for explicit opt-in use but are not applied anywhere in the
   app today, so the browser never downloads them (font files load lazily, only
   when a matching family is actually rendered). Convert them to WOFF2 the same way
   if/when they start being used. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/OpenSans-VariableFont_wdth_wght.woff2") format("woff2-variations"),
       url("../fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/OpenSans-Italic-VariableFont_wdth_wght.woff2") format("woff2-variations"),
       url("../fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
}

/* Open Sans Condensed — width 75%, exposed as its own family for explicit use.
   Use for tight UI labels, table headers, or display text where horizontal space is at a premium. */
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/OpenSans_Condensed-Light.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/OpenSans_Condensed-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/OpenSans_Condensed-Regular.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/OpenSans_Condensed-Italic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/OpenSans_Condensed-Medium.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/OpenSans_Condensed-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/OpenSans_Condensed-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/OpenSans_Condensed-Bold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/OpenSans_Condensed-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/OpenSans_Condensed-ExtraBoldItalic.ttf") format("truetype"); }

/* Open Sans SemiCondensed — width 87.5%, between Condensed and Regular.
   Use when Condensed feels too tight but you still want some space economy. */
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-Light.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-Regular.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-Italic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-Medium.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-Bold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Open Sans SemiCondensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/OpenSans_SemiCondensed-ExtraBoldItalic.ttf") format("truetype"); }


/* Carlito — metric-compatible substitute for Calibri.
   Use this for Word/email-signature mocks where Calibri isn't installed. */
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Carlito-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Carlito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Carlito-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Carlito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Carlito-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Carlito";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Carlito-BoldItalic.ttf") format("truetype");
}

:root {
  /* ---------- Brand Core ---------- */
  --cw-blue:        #0077C8;  /* Pantone 3005 C — primary */
  --cw-red:         #C8102E;  /* Pantone 186 C — accent, attention */
  --cw-gray:        #97999B;  /* Pantone Cool Gray 7 C — secondary */

  /* ---------- Extended Blues ---------- */
  --cw-blue-50:     #E6F1FA;
  --cw-blue-100:    #BFDCF2;
  --cw-blue-200:    #80B9E4;
  --cw-blue-500:    #0077C8;  /* = brand */
  --cw-blue-700:    #0C437C;  /* home-page heading blue */
  --cw-blue-900:    #053C74;  /* footer */

  /* ---------- Extended Reds ---------- */
  --cw-red-50:      #FBE7EA;
  --cw-red-100:     #F4B8C0;
  --cw-red-500:     #C8102E;  /* = brand */
  --cw-red-700:     #960C23;

  /* ---------- Neutrals (Light Mode) ---------- */
  --cw-ink:         #212529;  /* body text */
  --cw-ink-soft:    #3D3D3D;  /* dark gray text, "most used" */
  --cw-ink-muted:   #6B6E71;
  --cw-line:        #D9DBDD;
  --cw-surface-2:   #EEEEEE;  /* cards, table stripes */
  --cw-surface-1:   #F8F9FA;  /* page alt background */
  --cw-surface-0:   #FFFFFF;
  --cw-selected:    #E2E6EA;  /* pagination selected */

  /* ---------- Semantic (Light Mode) ---------- */
  --cw-success:     #2E7D32;
  --cw-success-bg:  #E8F5E9;
  --cw-warning:     #B26A00;
  --cw-warning-bg:  #FFF4E0;
  --cw-danger:      var(--cw-red-500);
  --cw-danger-bg:   var(--cw-red-50);
  --cw-info:        var(--cw-blue-500);
  --cw-info-bg:     var(--cw-blue-50);

  /* ---------- Focus ring ---------- */
  --cw-focus:       #1E90FF;
  --cw-focus-ring:  0 0 0 3px rgba(0, 119, 200, 0.35);

  /* ---------- Type ---------- */
  --cw-font-sans:   "Open Sans", "Segoe UI", Arial, sans-serif;
  --cw-font-doc:    Arial, "Helvetica Neue", Helvetica, sans-serif; /* for Word docs */
  --cw-font-office: Calibri, "Carlito", Arial, sans-serif;          /* for Office / email sig */
  --cw-font-mono:   "SFMono-Regular", Menlo, Consolas, monospace;

  --cw-weight-light:     300;
  --cw-weight-regular:   400;
  --cw-weight-semibold:  600;
  --cw-weight-bold:      700;
  --cw-weight-extrabold: 800;

  /* Modular scale, 1.200 — tuned for dense B2B data */
  --cw-text-xs:   12px;  /* captions, table meta */
  --cw-text-sm:   14px;  /* body small, form help */
  --cw-text-md:   16px;  /* base body */
  --cw-text-lg:   18px;  /* large body / H5 */
  --cw-text-xl:   22px;  /* H4 */
  --cw-text-2xl:  28px;  /* H3 */
  --cw-text-3xl:  34px;  /* H2 */
  --cw-text-4xl:  44px;  /* H1 */
  --cw-text-5xl:  56px;  /* display */

  --cw-leading-tight:  1.15;
  --cw-leading-snug:   1.3;
  --cw-leading-normal: 1.5;
  --cw-leading-loose:  1.65;

  /* ---------- Spacing (4-pt grid) ---------- */
  --cw-space-0:   0;
  --cw-space-1:   4px;
  --cw-space-2:   8px;
  --cw-space-3:  12px;
  --cw-space-4:  16px;
  --cw-space-5:  20px;
  --cw-space-6:  24px;
  --cw-space-8:  32px;
  --cw-space-10: 40px;
  --cw-space-12: 48px;
  --cw-space-16: 64px;
  --cw-space-20: 80px;
  --cw-space-24: 96px;

  /* ---------- Radius ---------- */
  --cw-radius-xs: 2px;
  --cw-radius-sm: 4px;
  --cw-radius-md: 6px;   /* default for inputs, cards */
  --cw-radius-lg: 10px;
  --cw-radius-xl: 16px;
  --cw-radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --cw-shadow-0: none;
  --cw-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 1px rgba(16, 24, 40, 0.04);
  --cw-shadow-2: 0 2px 6px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
  --cw-shadow-3: 0 8px 24px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.06);
  --cw-shadow-4: 0 16px 40px rgba(16, 24, 40, 0.14), 0 4px 8px rgba(16, 24, 40, 0.08);

  /* ---------- Motion ---------- */
  --cw-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --cw-ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --cw-dur-fast:  120ms;
  --cw-dur-med:   200ms;
  --cw-dur-slow:  320ms;

  /* ---------- Layout ---------- */
  --cw-container:    1200px;
  --cw-container-lg: 1440px;
  --cw-gutter:       24px;
  --cw-header-h:     64px;  /* marketing-site topbar (.cw-topbar) — NOT the app bar */
  --cw-appbar-h:     56px;  /* actual .cw-appbar height (AppHeader.razor.css) */

  /* ---------- z-index ---------- */
  --cw-z-base:       1;
  --cw-z-sticky:     50;
  --cw-z-nav:        100;
  --cw-z-overlay:    900;
  --cw-z-modal:      1000;
  --cw-z-toast:      1100;
}

/* =========================================================
   DARK MODE — Internal applications only
   Apply with <html data-theme="dark"> or on any wrapper element.
   Higher specificity ensures it overrides :root defaults.
   ========================================================= */

:root[data-theme="dark"],
[data-theme="dark"] {
  /* Inverted neutrals — light text on dark surfaces */
  --cw-ink:         #E8EAED;
  --cw-ink-soft:    #BDC1C6;
  --cw-ink-muted:   #9AA0A6;
  --cw-line:        #3C4043;
  --cw-surface-2:   #292A2D;  /* cards, table stripes */
  --cw-surface-1:   #1F1F1F;  /* page alt background */
  --cw-surface-0:   #121212;  /* page base */
  --cw-selected:    #2D3134;

  /* Blues stay vivid but slightly desaturated for dark */
  --cw-blue-50:     #1A2D3D;
  --cw-blue-100:    #1E3A52;
  --cw-blue-500:    #4A9FDB;  /* lighter than brand #0077C8 for contrast */
  --cw-blue-700:    #6BB3E8;
  
  /* Reds stay punchy */
  --cw-red-50:      #3D1A1F;
  --cw-red-500:     #E94560;  /* slightly lighter than brand #C8102E */
  --cw-red-700:     #F06D7F;

  /* Semantic colors adjusted for dark */
  --cw-success:     #66BB6A;
  --cw-success-bg:  #1B3A1D;
  --cw-warning:     #FFA726;
  --cw-warning-bg:  #3D2E1A;
  --cw-danger:      #E94560;
  --cw-danger-bg:   #3D1A1F;
  --cw-info:        #4A9FDB;
  --cw-info-bg:     #1A2D3D;

  /* Softer shadows for dark mode */
  --cw-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --cw-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --cw-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.4);
  --cw-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.5);

  /* Focus ring adjusted for dark */
  --cw-focus:       #6BB3E8;
  --cw-focus-ring:  0 0 0 3px rgba(74, 159, 219, 0.4);
}

/* ---------- Base reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-md);
  line-height: var(--cw-leading-normal);
  color: var(--cw-ink);
  background: var(--cw-surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--cw-dur-med), color var(--cw-dur-med);
}
a { color: var(--cw-blue-500); text-decoration: none; transition: color var(--cw-dur-fast); }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

/* ---------- Type utility classes ---------- */
.cw-display { font-size: var(--cw-text-5xl); font-weight: 800; line-height: var(--cw-leading-tight); letter-spacing: -0.02em; }
.cw-h1      { font-size: var(--cw-text-4xl); font-weight: 700; line-height: var(--cw-leading-tight); letter-spacing: -0.015em; }
.cw-h2      { font-size: var(--cw-text-3xl); font-weight: 700; line-height: var(--cw-leading-snug); }
.cw-h3      { font-size: var(--cw-text-2xl); font-weight: 600; line-height: var(--cw-leading-snug); }
.cw-h4      { font-size: var(--cw-text-xl);  font-weight: 600; line-height: var(--cw-leading-snug); }
.cw-h5      { font-size: var(--cw-text-lg);  font-weight: 600; line-height: var(--cw-leading-snug); }
.cw-body    { font-size: var(--cw-text-md);  font-weight: 400; line-height: var(--cw-leading-normal); }
.cw-body-sm { font-size: var(--cw-text-sm);  font-weight: 400; line-height: var(--cw-leading-normal); }
.cw-caption { font-size: var(--cw-text-xs);  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cw-ink-muted); }
.cw-eyebrow { font-size: var(--cw-text-xs);  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cw-blue-500); }

/* Updated: dark mode tokens added April 2026 */