/* ==========================================================================
   King's Barber — Global design tokens & base reset
   Loaded on every page. Block-specific styles live in /blocks/<name>/style.css
   ========================================================================== */

:root {
  /* Brand colors */
  --kb-primary:        #2b2f9e; /* royal-blue CTA button          */
  --kb-primary-hover:  #23277f;
  --kb-blue:           #3538cd; /* bright indigo section fills     */
  --kb-ink:            #0d0d0f; /* near-black backgrounds/text     */
  --kb-ink-soft:       #17171b;
  --kb-white:          #ffffff;
  --kb-muted:          rgba(255, 255, 255, 0.82);
  --kb-muted-dark:     rgba(13, 13, 15, 0.66);
  --kb-line:           rgba(255, 255, 255, 0.14);

  /* Typography */
  --kb-font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --kb-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --kb-fs-hero:  clamp(2.4rem, 6vw, 4.75rem);
  --kb-fs-h2:    clamp(1.9rem, 4vw, 3.25rem);
  --kb-fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --kb-fs-body:  clamp(1rem, 1.2vw, 1.15rem);

  /* Layout */
  --kb-container: 1200px;
  --kb-gutter:    clamp(1.25rem, 4vw, 3.5rem);
  --kb-radius:    10px;
  --kb-radius-lg: 18px;

  /* Motion */
  --kb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--kb-font-body);
  font-size: var(--kb-fs-body);
  line-height: 1.6;
  color: var(--kb-ink);
  background: var(--kb-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--kb-font-heading);
  line-height: 1.05;
  margin: 0;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

/* --- Shared helpers ------------------------------------------------------- */
.kb-container {
  width: 100%;
  max-width: var(--kb-container);
  margin-inline: auto;
  padding-inline: var(--kb-gutter);
}

.kb-btn {
  --_bg: var(--kb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2.1rem;
  font-family: var(--kb-font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--kb-white);
  background: var(--_bg);
  border: 0;
  border-radius: var(--kb-radius);
  transition: transform 0.18s var(--kb-ease), background 0.18s var(--kb-ease);
}
.kb-btn:hover { background: var(--kb-primary-hover); transform: translateY(-2px); }
.kb-btn:focus-visible { outline: 3px solid var(--kb-blue); outline-offset: 3px; }

.kb-btn--ghost {
  --_bg: transparent;
  border: 2px solid var(--kb-white);
}
.kb-btn--ghost:hover { background: var(--kb-white); color: var(--kb-ink); }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}