/* Royal Holding USA Plus — design tokens + base.
   Palette matches the real royalholdingusa.com brand: BLUE + BLACK + WHITE.
   Role rule: blue = brand + primary action (CTA) · charcoal/near-black = chrome (header/footer/nav)
              · white/gray = product surfaces · amber = OPTIONAL sale-badge flag only (not primary CTA).
   Variable names keep the --mps-* prefix — they are consumed throughout main.css and inline styles. */

:root{
  /* Brand — industrial blue (matches royalholdingusa.com) */
  --mps-red:#1E73BE; --mps-red-600:#175E9C; --mps-red-700:#114878; --mps-red-tint:#E8F1FA;

  /* Neutrals — charcoal & steel (chrome, text) */
  --ink-900:#0E1113; --ink-800:#171B1F; --ink-700:#23292E;
  --steel-600:#3A444C; --steel-500:#5B6770; --steel-400:#8A949C;

  /* Surfaces — light grays */
  --surface-0:#FFFFFF; --surface-50:#F5F6F7; --surface-100:#ECEEF0; --surface-200:#DCE0E3; --line:#D4D8DC;

  /* Accent — amber: OPTIONAL sale/deal flag only (NOT primary CTA; CTAs are red) */
  --amber-500:#FF8A00; --amber-600:#E07600; --amber-400:#FFB24D; --amber-tint:#FFF3E0;

  /* System */
  --success-600:#1E7A3D; --success-tint:#E7F4EC;
  --warning-600:#B7791F; --warning-tint:#FBF3E2;
  --error-600:#C0392B; --error-tint:#FBEAE8;
  --info-600:#1F6FB2;

  /* Semantic aliases */
  --bg:var(--surface-50); --text:var(--ink-900); --text-muted:var(--steel-500);
  --brand:var(--mps-red); --action:var(--mps-red); --action-hover:var(--mps-red-600);

  /* Type */
  --font-display:'Oswald','Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Inter','Roboto',system-ui,Arial,sans-serif;

  /* Radius — hard, industrial */
  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:8px; --r-pill:999px;

  /* Shadows — flat, restrained */
  --sh-1:0 1px 2px rgba(14,17,19,.08);
  --sh-2:0 2px 8px rgba(14,17,19,.10);
  --sh-3:0 8px 24px rgba(14,17,19,.16);
  --focus:0 0 0 3px rgba(255,138,0,.45);
  --t:160ms cubic-bezier(.2,.6,.2,1);

  /* Spacing scale (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* Layout */
  --container:1280px;
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px;
}

/* Base reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.55;
  color:var(--ink-900);background:var(--surface-50);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;
  line-height:1.1;font-weight:700;margin:0;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea,button{font-family:inherit;font-size:16px;}
:focus-visible{outline:none;box-shadow:var(--focus);}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--s-4);}
.tnum{font-variant-numeric:tabular-nums;}

/* Type scale helpers */
.t-display{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1.05;text-transform:uppercase;}
.t-h1{font-family:var(--font-display);font-weight:700;font-size:36px;text-transform:uppercase;}
.t-h2{font-family:var(--font-display);font-weight:700;font-size:28px;text-transform:uppercase;}
.t-h3{font-family:var(--font-display);font-weight:600;font-size:22px;}
.t-eyebrow{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mps-red);}
@media (max-width:768px){
  .t-display{font-size:32px;} .t-h1{font-size:28px;} .t-h2{font-size:24px;}
}