/*
  Steam Systems Ltd — Global CSS
*/

:root {
  /* Blue — brand / structure (Mapped to Automart Deep Navy) */
  --blue-900: #03050A;
  --blue-800: #060B16;
  --blue-700: #071038;
  --blue-600: #14487f;
  --blue-500: #14487f; /* base — eyebrows, logo, nav */
  --blue-500-glass: #14487Fe8; /* blue-500 at ~91% opacity for card/panel backgrounds */
  --blue-400: #1A2A6C;
  --blue-300: #3A4A8C;
  --blue-200: #bacbe6;
  --blue-100: #e3e4ea;

  /* Red — action / accent (Mapped to Automart Primary Red) */
  --red-900: #3D0003;
  --red-800: #7A0006;
  --red-700: #B80009; /* button hover/active */
  --red-600: #D80408;
  --red-500: #E8050C; /* base — primary buttons, CTAs */
  --red-400: #F64747;
  --red-300: #FF6666;
  --red-200: #FF9999;
  --red-100: #FFCCCC;

  --ink: #14487f;
  --off-white: #F9FAFB;

  /* Legacy aliases — keep existing CSS working */
  --color-gold:       var(--red-500);
  --color-gold-light: var(--red-400);
  --gold-grad:        linear-gradient(135deg, var(--red-500), var(--red-700));
  --color-navy:       var(--blue-600);
  --color-navy-mid:   var(--blue-500);

  /* Surface / background */
  --color-background:                  var(--off-white);
  --color-surface-container-lowest:    #ffffff;
  --color-surface-container-low:       #f6f7f9;
  --color-surface-container:           #f0f0f0;

  /* On-surface */
  --color-on-surface:         var(--ink);
  --color-on-surface-variant: #7A7A7A;

  /* Typography */
  --font-family: 'Manrope', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-on-surface);
  background-color: var(--color-background);
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #14487f;
}

p {
  margin: 0;
}

/* ── Button effects ── */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-premium:hover::before {
  width: 300px;
  height: 300px;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ── No scrollbar ── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Scroll animations ── */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll-left {
  animation: scroll-left 40s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-scroll-left {
    animation: none !important;
    overflow-x: auto !important;
  }
}