/* Direction: roadside garage energy — concrete canvas, safety-orange accent,
   heavyweight condensed display type, like a pit-crew service brand. */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f2efe9;
  --surface: #ffffff;
  --surface-2: #e9e3d8;
  --border: #ddd5c4;
  --border-strong: #b9ac93;
  --ink: #201b14;
  --muted: #6b6255;
  --accent: #ff5a1f;
  --accent-hover: #e64c15;
  --accent-ink: #2c2c2c;
  --accent-text: #aa370d;
  --accent-strong: #9c3308;
  --accent-soft: #ffe1cf;
  --accent-border: #ffb28c;
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #d9e1d6;
  --success-strong: #1d7047;
  --warning: #a85b00;
  --warning-ink: #ffffff;
  --warning-soft: #e9ddcd;
  --warning-strong: #8f4d00;
  --danger: #b0271c;
  --danger-ink: #ffffff;
  --danger-soft: #ead7d0;
  --danger-strong: #b0271c;
  --chart-1: #ff5a1f;
  --chart-2: #201b14;
  --chart-3: #a85b00;
  --chart-4: #1f7a4d;
  --chart-5: #3d5a80;
  --chart-6: #7c3f58;

  --font-display: "Anton", "Archivo Black", Impact, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 400;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.14em;
  --radius-card: 16px;
  --radius-btn: 999px;
  --shadow-card: 0 18px 40px -22px rgba(32, 27, 20, 0.35);
  --x-band: #17130d;
  --x-band-ink: #f5efe4;
  --x-band-muted: #b9ae9c;
  --x-on-photo: #ffffff;
}

html[data-theme="dark"] {
  --canvas: #100603;
  --surface: #281f1c;
  --surface-2: #1c1210;
  --border: #312926;
  --border-strong: #58514f;
  --ink: #f2efe9;
  --muted: #98928d;
  --accent: #ff5a1f;
  --accent-hover: #ff7341;
  --accent-ink: #240d04;
  --accent-text: #ff5a1f;
  --accent-strong: #ff5a1f;
  --accent-soft: #451809;
  --accent-border: #7c2c10;
  --success: #1f7a4d;
  --success-ink: #ffffff;
  --success-soft: #132013;
  --success-strong: #509874;
  --warning: #a85b00;
  --warning-ink: #ffffff;
  --warning-soft: #311902;
  --warning-strong: #bb7f38;
  --danger: #b0271c;
  --danger-ink: #ffffff;
  --danger-soft: #330d09;
  --danger-strong: #cb7069;
  --chart-1: #ff5a1f;
  --chart-2: #cfb524;
  --chart-3: #0d995f;
  --chart-4: #27c2e4;
  --chart-5: #6869fa;
  --chart-6: #fd7add;
}

/*
 * app.css — Apex Mobile Tyres landing page texture and motion accents.
 */

.tread-band {
  background-image: repeating-linear-gradient(
    115deg,
    var(--x-band) 0px,
    var(--x-band) 10px,
    #221b12 10px,
    #221b12 20px
  );
}

.phone-pulse {
  position: relative;
}

.phone-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0.55;
  animation: phone-pulse-ring 2.2s ease-out infinite;
}

html.reduced-motion .phone-pulse::after {
  animation: none;
  display: none;
}

@keyframes phone-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  80% {
    transform: scale(1.18);
    opacity: 0;
  }
  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 13, 0.15) 0%, rgba(23, 19, 13, 0.75) 100%);
}