/* ==========================================================
   Hemkunt Signage – design tokens and fonts
   Dark only. Lime is for highlights and buttons, never paragraphs.
   ========================================================== */

@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/big-shoulders-display-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
/* Name plates (house name plate previews) */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
/* Used only inside sign previews */
@font-face {
  font-family: 'Tilt Neon';
  src: url('../fonts/tilt-neon-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Brand colours (from the blueprint) */
  --lime: #D5FB63;
  --lime-soft: rgba(213, 251, 99, 0.12);
  --lime-line: rgba(213, 251, 99, 0.35);
  --black: #0A0A0A;
  --charcoal: #141414;
  --charcoal-2: #1A1A19;
  --line: #2A2A2A;
  --white: #F2F2EE;
  --grey: #9A9A92;
  --amber: #FFBE7A; /* warm shop light inside scenes only */

  /* Type */
  --f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-neon: 'Tilt Neon', var(--f-body);
  --f-flex: 'Poppins', var(--f-body);

  /* Fluid sizes, mobile first */
  --fs-hero: clamp(2.9rem, 10.5vw, 6.4rem);
  --fs-h2: clamp(2.3rem, 7.5vw, 4.4rem);
  --fs-h3: clamp(1.45rem, 4.2vw, 1.9rem);
  --fs-lead: clamp(1.06rem, 2.6vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Space and shape */
  --gutter: clamp(16px, 5vw, 40px);
  --section: clamp(52px, 8vw, 104px);
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1240px;
  --hdr-h: 68px;
  --abar-h: 60px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --glow: 0 0 0 1px var(--lime-line), 0 0 24px rgba(213, 251, 99, .25);
}

@media (min-width: 900px) {
  :root { --hdr-h: 80px; }
}