/* ============================================================
   Cochrane Supply Design System — Foundations
   Dark-mode focus, red + black brand. Light-mode tokens
   provided for surfaces that mirror cochranesupply.com.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- Brand colors — CANONICAL (brand guide) ----------
     Use these for any output that formally represents Cochrane Supply:
     PDFs, decks, print, signage, anything customer-facing.
     Source: Cochrane Family of Companies Quick Branding Guide. */
  --cs-scarlet:     #C8102E;   /* Pantone 186 C — official brand red */
  --cs-velvet:      #231F20;   /* Pantone Neutral Black C — wordmark */
  --cs-white:       #FFFFFF;

  /* ---------- Web colors (cochranesupply.com Magento theme) ----------
     In active use on the e-commerce site but NOT in the brand guide.
     Do not use these for print, PDFs, or formal collateral. */
  --cs-navy:        #1d3973;   /* nav background, legacy CTAs */
  --cs-navy-deep:   #142a57;
  --cs-link-blue:   #006bb4;   /* hyperlinks */
  --cs-red:         #d02f34;   /* web hover red — slightly brighter than Scarlet */
  --cs-red-bright:  #e63a3f;   /* hover glow */
  --cs-red-deep:    #a82127;   /* press / shadow tone */
  --cs-error:       #e02b27;
  --cs-amber:       #fdf0d5;   /* legacy callout */
  --cs-amber-fg:    #7a4f00;

  /* ---------- Family of Companies (brand guide) ----------
     Each sister brand has its own palette + typeface.
     Do not mix palettes across the family. */
  --cs-canada-red:  #EE3124;   /* Canada Controls — Pantone Bright Red C */
  --cs-sbe-blue:    #2F67D6;   /* Smart Building Equipment — Pantone 2727 C */

  /* ---------- Black-canvas (dark) surface scale ---------- */
  --cs-bg-0:        #000000;   /* page */
  --cs-bg-1:        #0a0a0b;   /* lifted surface */
  --cs-bg-2:        #131316;   /* card */
  --cs-bg-3:        #1d1d22;   /* card-on-card / input */
  --cs-bg-4:        #2a2a30;   /* hover */
  --cs-bg-5:        #3a3a42;   /* pressed / divider strong */

  /* ---------- Foregrounds (on dark) ---------- */
  --cs-fg-0:        #ffffff;   /* primary type, headlines */
  --cs-fg-1:        #ededee;   /* body */
  --cs-fg-2:        #b4b4ba;   /* secondary */
  --cs-fg-3:        #80808a;   /* tertiary, captions */
  --cs-fg-4:        #55555c;   /* disabled */

  /* ---------- Borders / hairlines ---------- */
  --cs-line-1:      rgba(255,255,255,0.08);
  --cs-line-2:      rgba(255,255,255,0.14);
  --cs-line-3:      rgba(255,255,255,0.22);
  --cs-line-red:    rgba(208,47,52,0.55);

  /* ---------- Light-mode mirrors (web/print) ---------- */
  --cs-light-bg:        #ffffff;
  --cs-light-surface:   #f5f5f5;
  --cs-light-alt:       #f0f0f0;
  --cs-light-fg:        #111315;
  --cs-light-fg-2:      #333333;
  --cs-light-fg-3:      #666666;
  --cs-light-fg-4:      #757575;
  --cs-light-line:      #cccccc;
  --cs-light-line-soft: #e5e5e5;

  /* ---------- Semantic ---------- */
  --cs-accent:          var(--cs-red);
  --cs-accent-hover:    var(--cs-red-bright);
  --cs-accent-press:    var(--cs-red-deep);
  --cs-success:         #1f9d55;
  --cs-warn:            #d4a514;
  --cs-danger:          var(--cs-error);
  --cs-info:            var(--cs-link-blue);

  /* ---------- Type ---------- */
  --cs-font-sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cs-font-mono:  "JetBrains Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
  --cs-font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid + fixed sizes (px) */
  --cs-text-3xs: 10px;
  --cs-text-2xs: 11px;
  --cs-text-xs:  12px;
  --cs-text-sm:  13px;
  --cs-text-base:14px;   /* matches site body */
  --cs-text-md:  16px;
  --cs-text-lg:  18px;
  --cs-text-xl:  22px;
  --cs-text-2xl: 28px;
  --cs-text-3xl: 36px;
  --cs-text-4xl: 48px;
  --cs-text-5xl: 64px;
  --cs-text-6xl: 88px;
  --cs-text-7xl: 120px;

  /* weights */
  --cs-w-light:  300;
  --cs-w-reg:    400;
  --cs-w-med:    500;
  --cs-w-semi:   600;
  --cs-w-bold:   700;
  --cs-w-black:  900;

  /* tracking */
  --cs-track-tight:  -0.02em;
  --cs-track-snug:   -0.01em;
  --cs-track-normal: 0;
  --cs-track-wide:   0.04em;
  --cs-track-wider:  0.10em;
  --cs-track-cap:    0.14em;   /* eyebrow / all-caps */

  /* leading */
  --cs-lh-tight: 1.05;
  --cs-lh-snug:  1.2;
  --cs-lh-base:  1.43;   /* matches site */
  --cs-lh-loose: 1.6;

  /* ---------- Spacing scale (4px base) ---------- */
  --cs-s-0:   0px;
  --cs-s-px:  1px;
  --cs-s-1:   4px;
  --cs-s-2:   8px;
  --cs-s-3:   12px;
  --cs-s-4:   16px;
  --cs-s-5:   20px;
  --cs-s-6:   24px;
  --cs-s-8:   32px;
  --cs-s-10:  40px;
  --cs-s-12:  48px;
  --cs-s-16:  64px;
  --cs-s-20:  80px;
  --cs-s-24:  96px;
  --cs-s-32:  128px;

  /* ---------- Radii (conservative — site uses 3px) ---------- */
  --cs-r-0:    0px;
  --cs-r-xs:   2px;
  --cs-r-sm:   3px;     /* default: matches site */
  --cs-r-md:   6px;
  --cs-r-lg:   10px;
  --cs-r-xl:   16px;
  --cs-r-pill: 999px;

  /* ---------- Shadows ---------- */
  --cs-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.40);
  --cs-shadow-2: 0 4px 14px rgba(0,0,0,0.45);
  --cs-shadow-3: 0 16px 40px rgba(0,0,0,0.55);
  --cs-shadow-red:  0 0 0 1px rgba(208,47,52,0.45), 0 8px 28px rgba(208,47,52,0.28);
  --cs-shadow-light: 0 3px 3px rgba(0,0,0,0.15);  /* legacy site */

  /* ---------- Motion ---------- */
  --cs-ease:        cubic-bezier(.2,.7,.2,1);
  --cs-ease-out:    cubic-bezier(.16,1,.3,1);
  --cs-ease-in:     cubic-bezier(.7,0,.84,0);
  --cs-dur-fast:    120ms;
  --cs-dur-base:    200ms;
  --cs-dur-slow:    420ms;

  /* ---------- Layout ---------- */
  --cs-container:   1280px;
  --cs-container-narrow: 960px;
  --cs-gutter:      24px;
  --cs-rule:        1px;
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

.cs-display {
  font-family: var(--cs-font-display);
  font-weight: var(--cs-w-black);
  font-size: var(--cs-text-7xl);
  line-height: var(--cs-lh-tight);
  letter-spacing: var(--cs-track-tight);
}
.cs-h1 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-bold);
  font-size: var(--cs-text-5xl);
  line-height: var(--cs-lh-tight);
  letter-spacing: var(--cs-track-tight);
}
.cs-h2 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-bold);
  font-size: var(--cs-text-4xl);
  line-height: var(--cs-lh-snug);
  letter-spacing: var(--cs-track-snug);
}
.cs-h3 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-semi);
  font-size: var(--cs-text-2xl);
  line-height: var(--cs-lh-snug);
}
.cs-h4 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-semi);
  font-size: var(--cs-text-xl);
  line-height: var(--cs-lh-snug);
}
.cs-h5 {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-semi);
  font-size: var(--cs-text-md);
  line-height: var(--cs-lh-snug);
}
.cs-eyebrow {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-bold);
  font-size: var(--cs-text-xs);
  letter-spacing: var(--cs-track-cap);
  text-transform: uppercase;
  color: var(--cs-red);
}
.cs-body {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-reg);
  font-size: var(--cs-text-base);
  line-height: var(--cs-lh-base);
}
.cs-body-lg {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-reg);
  font-size: var(--cs-text-md);
  line-height: var(--cs-lh-base);
}
.cs-caption {
  font-family: var(--cs-font-sans);
  font-weight: var(--cs-w-reg);
  font-size: var(--cs-text-xs);
  line-height: var(--cs-lh-snug);
  color: var(--cs-fg-3);
}
.cs-mono {
  font-family: var(--cs-font-mono);
  font-weight: var(--cs-w-med);
  font-size: var(--cs-text-sm);
  letter-spacing: 0;
}

/* ============================================================
   Base reset + page defaults (opt-in via .cs-root)
   ============================================================ */

.cs-root {
  background: var(--cs-bg-0);
  color: var(--cs-fg-1);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-base);
  line-height: var(--cs-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.cs-root.cs-light {
  background: var(--cs-light-bg);
  color: var(--cs-light-fg-2);
}