/* ============================================================
   KHAN TYRE — BRAND TOKENS
   Theme: "Signal Yellow on Graphite" (light site, dark header/footer)
   Drop this file in and use the variables. Do not hard-code colours.
   ============================================================ */

:root{
  /* --- Surfaces --- */
  --kt-white:      #FFFFFF;   /* page base */
  --kt-alt:        #F4F5F7;   /* alternating section background */
  --kt-border:     #E4E7EB;   /* 1px hairlines, card borders */
  --kt-graphite:   #14171A;   /* header, footer, dark bands (tyre rubber) */
  --kt-graphite-2: #1E2328;   /* raised surface on dark */

  /* --- Brand yellow --- */
  --kt-yellow:      #FFC400;  /* buttons, accents, highlights */
  --kt-yellow-dark: #E0A800;  /* button hover / pressed */
  --kt-yellow-text: #8A6200;  /* the ONLY yellow allowed as text on white */
  --kt-yellow-soft: #FFF6D6;  /* tinted chip / badge background */

  /* --- Text --- */
  --kt-ink:   #14171A;        /* headings */
  --kt-body:  #3B434D;        /* paragraphs */
  --kt-muted: #5B6470;        /* captions, labels */
  --kt-on-dark:      #E7EBEF; /* body text on graphite */
  --kt-on-dark-mute: #A6B0BB;

  /* --- Accents (use sparingly) --- */
  --kt-red:      #D7263D;     /* max 5% of the design: Sale / Urgent only */
  --kt-whatsapp: #25D366;
  --kt-success:  #0B7A43;

  /* --- Type --- */
  --kt-font-head: 'Archivo', system-ui, sans-serif;   /* 700 / 800 / 900 */
  --kt-font-body: 'Inter', system-ui, sans-serif;     /* 400 / 500 / 600 */

  /* --- Radius --- */
  --kt-r-sm: 8px;
  --kt-r-md: 12px;
  --kt-r-lg: 16px;
  --kt-r-pill: 999px;

  /* --- Shadows --- */
  --kt-shadow-card:  0 1px 2px rgba(16,24,40,.05);
  --kt-shadow-hover: 0 18px 40px -24px rgba(255,196,0,.55);
  --kt-shadow-bar:   0 -6px 24px rgba(16,24,40,.10);

  /* --- Spacing scale (8px) --- */
  --kt-s1: 8px;  --kt-s2: 16px; --kt-s3: 24px;
  --kt-s4: 32px; --kt-s5: 48px; --kt-s6: 64px; --kt-s7: 96px;

  /* --- Motion --- */
  --kt-ease: cubic-bezier(.22,1,.36,1);
  --kt-fast: 200ms;
  --kt-mid:  350ms;
}

/* ---------- Base ---------- */
body{
  background: var(--kt-white);
  color: var(--kt-body);
  font-family: var(--kt-font-body);
  font-size: 16px;
  line-height: 1.66;
}
h1,h2,h3,h4{
  font-family: var(--kt-font-head);
  color: var(--kt-ink);
  line-height: 1.08;
  letter-spacing: -.025em;
}
h1{ font-size: clamp(32px, 6vw, 62px); font-weight: 900; }
h2{ font-size: clamp(26px, 4vw, 42px); font-weight: 800; }
h3{ font-size: 22px; font-weight: 700; }
p { max-width: 68ch; }

/* ---------- Eyebrow label ---------- */
.kt-eyebrow{
  font-family: var(--kt-font-head); font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--kt-yellow-text); background: var(--kt-yellow-soft);
  border: 1px solid #F5E08F; padding: 6px 12px; border-radius: var(--kt-r-pill);
  display: inline-block;
}
/* On graphite backgrounds */
.kt-eyebrow--dark{
  color: var(--kt-yellow); background: rgba(255,196,0,.12);
  border-color: rgba(255,196,0,.35);
}

/* ---------- Buttons ---------- */
.kt-btn{
  font-family: var(--kt-font-head); font-weight: 800; font-size: 15px;
  height: 48px; padding: 0 20px; border-radius: var(--kt-r-md);
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  transition: background var(--kt-fast) var(--kt-ease), transform 150ms var(--kt-ease);
}
.kt-btn:active{ transform: scale(.98); }
.kt-btn--primary{ background: var(--kt-yellow); color: #1A1400; }
.kt-btn--primary:hover{ background: var(--kt-yellow-dark); }
.kt-btn--dark{ background: var(--kt-graphite); color: #fff; }
.kt-btn--ghost{ background: #fff; color: var(--kt-ink); box-shadow: inset 0 0 0 1.5px var(--kt-ink); }
.kt-btn--wa{ background: var(--kt-whatsapp); color: #062B14; }
@media (max-width: 767px){ .kt-btn{ height: 52px; width: 100%; justify-content: center; } }

/* ---------- Card ---------- */
.kt-card{
  background: #fff; border: 1px solid var(--kt-border);
  border-radius: var(--kt-r-lg); padding: 24px;
  box-shadow: var(--kt-shadow-card);
  transition: transform var(--kt-mid) var(--kt-ease),
              border-color var(--kt-mid) var(--kt-ease),
              box-shadow var(--kt-mid) var(--kt-ease);
}
.kt-card:hover{
  transform: translateY(-6px);
  border-color: var(--kt-yellow);
  box-shadow: var(--kt-shadow-hover);
}

/* ---------- Layout ---------- */
.kt-container{ max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 1024px){ .kt-container{ padding-inline: 40px; } }
.kt-section{ padding-block: 64px; }
@media (min-width: 1024px){ .kt-section{ padding-block: 96px; } }
.kt-section--alt{ background: var(--kt-alt); }
.kt-section--dark{ background: var(--kt-graphite); color: var(--kt-on-dark); }
.kt-section--dark h1,.kt-section--dark h2,.kt-section--dark h3{ color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition-duration: 1ms !important; }
  .kt-card:hover{ transform: none; }
}