/* =====================================================================
   MinRix — design tokens
   Single source of truth for colour, type and radii.

   Load this before Tailwind's config script on every page:
     <link rel="stylesheet" href="css/minrix-tokens.css">        (root)
     <link rel="stylesheet" href="../css/minrix-tokens.css">     (pages/, includes/)

   Every value below was already in use across the site — this file
   renames them by role, it does not change any colour.

   To restyle the whole site, edit the BRAND RAMP and INK RAMP only.
   ===================================================================== */

:root {

  /* ---------------------------------------------------------- ink ramp
     Near-black grounds. Used for the dark header, footer and overlays. */
  --mx-ink-900:      #0c1a13;   /* primary dark ground, splash, footer   */
  --mx-ink-800:      #13241a;   /* raised dark surface                    */
  --mx-ink-panel:    #0f1f16;   /* dropdown panels on dark (lang, nav)    */

  /* -------------------------------------------------------- brand ramp
     Emerald. --mx-brand-600 is the action colour: buttons, links, focus. */
  --mx-brand-900:    #064e3b;   /* deepest brand, gradient ends           */
  --mx-brand-700:    #065f46;   /* button hover, strong headings          */
  --mx-brand-600:    #047857;   /* PRIMARY — buttons, links, active tabs (5.5:1 on white, WCAG AA; was #059669 = 3.8:1) */
  --mx-brand-500:    #10b981;   /* accents, glows, progress bars          */
  --mx-brand-400:    #34d399;   /* highlight on dark                      */
  --mx-brand-300:    #6ee7b7;   /* eyebrow text on dark                   */
  --mx-brand-200:    #a7f3d0;   /* hover borders, muted accent            */
  --mx-brand-100:    #d1fae5;   /* tint fill                              */
  --mx-brand-050:    #ecfdf5;   /* lightest tint, icon tiles              */
  --mx-brand-edge:   #c7f0dd;   /* border on brand tints                  */
  --mx-brand-edge-2: #b6ead0;   /* border, calendar day hover             */
  --mx-brand-wash:   #f2fbf6;   /* faintest brand wash                    */

  /* ---------------------------------------------------------- surfaces */
  --mx-page:         #f7f8fb;   /* page background                        */
  --mx-surface:      #ffffff;   /* panels, cards                          */
  --mx-surface-2:    #f6f8fc;   /* inset fields, spec blocks              */
  --mx-surface-3:    #fbfcfe;   /* subtlest raised block                  */
  --mx-surface-4:    #f4f6fb;   /* table row hover                        */
  --mx-surface-5:    #f1f5fb;   /* chips                                  */

  /* ----------------------------------------------------------- borders */
  --mx-border:       #e5e8ef;   /* default panel border                   */
  --mx-border-soft:  #eef2f7;   /* hairline inside panels                 */
  --mx-border-field: #e2e8f0;   /* form controls                          */
  --mx-border-btn:   #cdd5e4;   /* outline button                         */
  --mx-border-alt:   #dbe3ef;   /* slot buttons                           */
  --mx-border-cool:  #e9edf4;   /* legend swatches                        */

  /* -------------------------------------------------------------- text */
  --mx-text:         #111827;   /* body copy                              */
  --mx-text-strong:  #1e293b;   /* emphasised body                        */
  --mx-text-muted:   #475569;   /* secondary copy                         */
  --mx-text-soft:    #334155;   /* chips, labels                          */
  --mx-text-faint:   #5f6f84;   /* captions (AA on light backgrounds; was #94a3b8) */
  --mx-text-fainter: #cbd5e1;   /* disabled                               */
  --mx-text-slate:   #556479;   /* fallback grey (AA on light backgrounds) */
  --mx-text-on-dark: #c3cde0;   /* body copy over ink                     */

  /* ---------------------------------------------------------- semantic
     Direction and state. Never reuse these for decoration.              */
  --mx-up:           #16a34a;   /* price up, success                      */
  --mx-down:         #dc2626;   /* price down, error                      */
  --mx-warn-text:    #9a3412;   /* amber callout text                     */
  --mx-warn-bg:      #fff7ed;
  --mx-warn-border:  #fed7aa;
  --mx-danger-soft:  #f87171;   /* "soon" markers                         */
  --mx-danger-tint:  #fca5a5;

  /* -------------------------------------------------- material category
     Must match CAT_STYLE in the Materials Market listings script.        */
  --mx-cat-metals:    #059669;   /* green = brand, as on the Materials Market */
  --mx-cat-energy:    #ea580c;
  --mx-cat-minerals:  #0284c7;
  --mx-cat-chemicals: #7c3aed;
  --mx-cat-metals-dk:    #047857;
  --mx-cat-energy-dk:    #9a3412;
  --mx-cat-minerals-dk:  #0369a1;
  --mx-cat-minerals-bg:  #f0f9ff;
  --mx-cat-minerals-edge: #bae6fd;
  --mx-cat-chemicals-dk: #5b21b6;
  --mx-success-bg:    #ecfdf5;  /* green tint fill                        */
  --mx-success-edge:  #a7f3d0;
  --mx-violet-bg:     #f5f3ff;
  --mx-violet-edge:   #ddd6fe;

  /* ---------------------------------------------------------- typography */
  --mx-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --------------------------------------------------------------- shape */
  --mx-radius-sm:  6px;
  --mx-radius:     8px;
  --mx-radius-md:  10px;
  --mx-radius-lg:  12px;
  --mx-radius-xl:  16px;

  /* -------------------------------------------------------------- layout */
  --mx-container: 1280px;
  --mx-gutter:    24px;

  /* -------------------------------------------------------------- motion */
  --mx-ease:     cubic-bezier(.4, 0, .2, 1);
  --mx-dur-fast: .2s;
  --mx-dur:      .3s;
}

/* ---- accessibility: skip link ---- */
.skip-to-content{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--mx-brand-600);color:#fff;
  padding:10px 18px;border-radius:0 0 8px 0;font-size:14px;font-weight:600;text-decoration:none}
.skip-to-content:focus{left:0}

/* ---- IoT device suite: one accent colour per device ---- */
:root{
  --mx-dev-sticker:      #0f766e;            /* IntelliSticker  — teal         */
  --mx-dev-sticker-soft: #ecfdfa;
  --mx-dev-sticker-ring: rgba(13,148,136,.16);
  --mx-dev-tracker:      #047857;            /* Container tracker — emerald    */
  --mx-dev-tracker-soft: #ecfdf5;
  --mx-dev-tracker-ring: rgba(5,150,105,.16);
  --mx-dev-lock:         #7c3aed;            /* Electronic lock  — violet      */
  --mx-dev-lock-soft:    #f5f3ff;
  --mx-dev-lock-ring:    rgba(124,58,237,.16);
}

/* Screen-reader-only text (labels that are visually hidden) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Small phones: keep the header on one line */
@media (max-width:479px){ .mx-page-badge{display:none} }
@media (max-width:359px){ .grad-head .container-x > .flex > a.btn{padding-left:.65rem;padding-right:.65rem;font-size:13px} }
/* Leave room so the floating support button never covers the footer links */
footer.bg-ink-900{padding-bottom:6rem}
/* Industries chips: material not available yet (coming soon in the app) */
.chip.chip-soon{border-style:dashed;color:var(--mx-text-muted,#64748b);background:transparent}

/* ===== Accessibility (round 12) ===== */
/* One visible focus ring for keyboard users */
:focus-visible{outline:2px solid var(--mx-brand-600);outline-offset:2px}
.grad-head :focus-visible, footer :focus-visible, .cap :focus-visible, .bg-ink-900 :focus-visible{outline-color:var(--mx-brand-300)}
.field:focus-visible{outline:2px solid var(--mx-brand-600);outline-offset:1px}
/* Support button is a real <button> now */
button.support-toggle{border:0;padding:0;font:inherit}
/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce){
  .fade{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* Text contrast (WCAG AA 4.5:1): light backgrounds get darker greys and greens … */
html .text-slate-400{color:#5f6f84}
html .text-slate-500{color:#556479}
html .text-emerald-600{color:#047857}
/* … dark backgrounds keep light greys */
html footer .text-slate-400, html .bg-ink-900 .text-slate-400, html .grad-head .text-slate-400, html .cap .text-slate-400,
html footer .text-slate-500, html .bg-ink-900 .text-slate-500, html .grad-head .text-slate-500, html .cap .text-slate-500{color:#94a3b8}
html .text-amber-600{color:#b45309}
html .tag.bg-amber-500{background:#b45309}

/* V1 (device check 4 Oct): between 1024 and 1179 px (iPad landscape, laptops with 125–150 % scaling) the
   desktop menu has no room and breaks onto two lines — use the menu button there, as on tablets. */
@media (min-width: 1024px) and (max-width: 1179.98px) {
  header nav[aria-label="Main"], nav[aria-label="Main"] { display: none !important; }
  #menuBtn { display: inline-flex !important; }
  #mobileMenu:not(.hidden) { display: block !important; }
}

/* V2 (device check 4 Oct): figure boxes three-in-a-row on phones — keep long words ("Professionals",
   "Commodities", "Satisfaction") inside the box. */
@media (max-width: 430px) {
  .grid.grid-cols-3 > .panel { padding: 1rem .25rem; }
  .grid.grid-cols-3 > .panel > .text-sm { font-size: .75rem; line-height: 1.05rem; letter-spacing: -.01em; hyphens: auto; -webkit-hyphens: auto; }
  .grid.grid-cols-3 > .panel > .text-3xl { font-size: 1.6rem; line-height: 2rem; }
}
@media (max-width: 359.98px) {
  .grid.grid-cols-3 > .panel > .text-sm { font-size: .6875rem; }
}

/* V5 (device check 4 Oct): no text smaller than 11.5 px (was 9–10.5 px on some labels) */
.text-\[10px\] { font-size: 11.5px !important; }

/* V4 (device check 4 Oct): on touch screens, standalone text links get a touch area at least 44 px tall.
   An invisible layer around the link — the layout and the look stay exactly the same. */
@media (pointer: coarse) {
  footer a:not([class*="h-9"]), a.text-brand-600, a.go, a.hover\:text-white { position: relative; }
  footer a:not([class*="h-9"])::after, a.text-brand-600::after, a.go::after, a.hover\:text-white::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%);
  }
}

/* V3 (device check 4 Oct): very small phones (under 360 px, e.g. iPhone SE 1st generation) */
@media (max-width: 359.98px) {
  /* homepage cards: the price drops under the material name instead of touching the card edge */
  .flex.items-center.justify-between.gap-2:has(> [data-mx-price]) { flex-wrap: wrap; row-gap: .25rem; }
  /* header: the language choice moves into the menu (Language section) to make room */
  [role="banner"] .lang-wrap { display: none !important; }
}
/* V3: phone header — logo, button and menu on one line, the button text on one line */
@media (max-width: 419.98px) {
  [role="banner"] > a.gap-2\.5 { gap: .4rem; }
  [role="banner"] > .flex.items-center.gap-3 { gap: .4rem; }
  [role="banner"] .btn.px-4 { padding-left: .55rem; padding-right: .55rem; font-size: .8125rem; white-space: nowrap; }
}
/* IoT "Looking for something specific?" box: the text keeps inside the box on narrow screens */
@media (max-width: 640px) { .catalogue-note .cn-txt { min-width: 0 !important; } }
@media (max-width: 1023.98px) { [role="banner"] .btn.px-4 { white-space: nowrap; } }