/* ============================================================
   THE SUPPLY HUB — Design Foundations
   Colors + Typography tokens and semantic element styles.
   Brand: first-aid & safety supplies, Gibraltar.
   Voice: trustworthy, bold, practical. Navy + Red + White.
   ============================================================ */

/* Fonts — loaded from Google Fonts.
   SUBSTITUTION NOTE: the wordmark uses a geometric bold sans
   (custom/Montserrat-like). We substitute Montserrat for display
   and Mulish for body/UI. Swap if brand fonts are provided. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND RED ---------- */
  --red-50:  #FCEAEA;
  --red-100: #F8D2D2;
  --red-200: #F0A6A6;
  --red-400: #E23A3A;
  --red-500: #CE0000;   /* PRIMARY brand red (from hero) */
  --red-600: #B80000;   /* hover */
  --red-700: #970000;   /* pressed */

  /* ---------- INK / NAVY ---------- */
  --ink-950: #060F17;
  --ink-900: #0A151F;
  --ink-800: #11212F;   /* primary text + dark surfaces (from hero) */
  --ink-700: #1C2E3D;
  --ink-600: #2A3D4D;

  /* ---------- SLATE (secondary text / UI) ---------- */
  --slate-600: #51606C;
  --slate-500: #6B7884;
  --slate-400: #9AA5AE;
  --slate-300: #C7CED4;
  --slate-200: #DEE3E8;

  /* ---------- SURFACES & LINES ---------- */
  --surface:        #FFFFFF;
  --surface-muted:  #F5F7F9;
  --surface-sunken: #EDF0F3;
  --surface-ink:    #11212F;   /* dark sections (footer, banners) */
  --border:         #E3E7EB;
  --border-strong:  #CDD4DA;

  /* ---------- SEMANTIC ---------- */
  --success:    #1E8E5A;   /* in stock / certified */
  --success-bg: #E6F4EC;
  --warning:    #C77700;   /* low stock */
  --warning-bg: #FBF0DE;
  --danger:     #CE0000;   /* errors (== brand red) */
  --danger-bg:  #FCEAEA;
  --info:       #11212F;
  --info-bg:    #EDF0F3;

  /* ---------- SEMANTIC TEXT ROLES ---------- */
  --fg-1: var(--ink-800);   /* primary text */
  --fg-2: var(--slate-600); /* secondary text */
  --fg-3: var(--slate-500); /* muted / captions */
  --fg-ondark: #FFFFFF;
  --fg-ondark-2: #B7C1CA;
  --accent: var(--red-500);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.375rem;  /* 38 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.75rem;   /* 76 */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --tracking-mega:  0.14em;  /* GIBRALTAR-style labels */
  --tracking-wide:  0.06em;
  --tracking-normal:0;
  --tracking-tight: -0.02em;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(17,33,47,0.06);
  --shadow-sm: 0 1px 3px rgba(17,33,47,0.08), 0 1px 2px rgba(17,33,47,0.04);
  --shadow-md: 0 4px 12px rgba(17,33,47,0.10);
  --shadow-lg: 0 12px 28px rgba(17,33,47,0.14);
  --shadow-red: 0 8px 20px rgba(206,0,0,0.28);

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.ts-body { font-family: var(--font-body); color: var(--fg-1); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }

/* Display = oversized uppercase hero statements */
.ts-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

.ts-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ts-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ts-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: var(--leading-snug); color: var(--fg-1); }
.ts-h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-1); }

/* Eyebrow / label = spaced uppercase, the "GIBRALTAR" treatment */
.ts-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--accent);
}

.ts-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--text-xl); line-height: var(--leading-relaxed); color: var(--fg-2); }
.ts-p    { font-family: var(--font-body); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); text-wrap: pretty; }
.ts-small{ font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-3); }
.ts-mono { font-family: var(--font-mono); font-size: 0.9em; color: var(--fg-1); }

.ts-accent { color: var(--accent); }