/* ============================================================
   MKK Industries — design tokens (single source of brand values)
   Layout/components never hard-code colours: they use these tokens.
   Palette = MKK brand (logo + sales flyer design/sales_add.jpg,
   supplied 2026-10-02): navy, logo blue, logo green, yellow highlight.
   ============================================================ */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --color-navy: #021a47;          /* header, footer, headings, prices */
  --color-navy-dark: #001237;     /* announcement strip, navy hover */
  --color-navy-soft: #edf2fa;     /* navy tint backgrounds */
  --color-primary: #0062d8;       /* logo blue - primary actions: Add to Quote, Request Quote */
  --color-primary-hover: #014aa9;
  --color-primary-soft: #e8f1fc;
  --color-accent: #72b30f;        /* logo green - bars, underlines, decoration (not text on white) */
  --color-accent-dark: #4b7a08;   /* green that is readable on white (icons, small text) */
  --color-highlight: #fdcb02;     /* flyer yellow - Specials badges, with navy text */

  /* Neutrals */
  --color-text: #111827;
  --color-muted: #4b5563;
  --color-subtle: #6b7280;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-surface: #f8fafc;
  --color-white: #ffffff;

  /* Semantic states */
  --color-success: #047857;
  --color-success-soft: #ecfdf5;
  --color-warning: #b45309;
  --color-warning-soft: #fffbeb;
  --color-error: #b91c1c;
  --color-error-soft: #fef2f2;
  --color-info: #1d4ed8;
  --color-info-soft: #eff6ff;

  /* Type */
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shape */
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(17 24 39 / .06);
  --shadow-card-hover: 0 8px 24px rgb(2 26 71 / .10);
  --shadow-dropdown: 0 16px 40px rgb(17 24 39 / .16);

  --header-strip-height: 34px;

  /* Bootstrap mapped onto the brand tokens */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-white);
  --bs-link-color: var(--color-navy);
  --bs-link-color-rgb: 2, 26, 71;
  --bs-link-hover-color: var(--color-primary);
  --bs-link-hover-color-rgb: 0, 98, 216;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-lg);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 0, 98, 216;
  --bs-secondary-color: var(--color-muted);
  --bs-focus-ring-color: rgb(2 26 71 / .30);
}