/* ==========================================================================
   2CLICK AMC V20 — Complete Typography & Design Token Foundation
   English: Plus Jakarta Sans / Inter (with local Manrope WOFF/TTF fallback)
   Hindi: Noto Sans Devanagari (with local CareHindi WOFF2 fallback)
   ========================================================================== */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-400.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-600.ttf') format('truetype');
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-700.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-800.ttf') format('truetype');
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  src: url('/assets/noto-sans-devanagari-devanagari-500-normal-DVtwyDnM.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'CareHindi';
  src: url('/assets/noto-sans-devanagari-devanagari-500-normal-DVtwyDnM.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Complete 2CLICK AMC Colour System */
  --color-primary: #176B4D;
  --color-primary-dark: #104C38;
  --color-secondary: #2E8B64;
  --color-bg-soft: #E8F2EC;
  --color-bg-mint: #F2F7F3;
  --color-bg-warm: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-text-primary: #24332B;
  --color-text-secondary: #68756D;
  --color-border: #E2E8E3;
  --color-success: #237A4B;
  --color-warning: #B7791F;
  --color-error: #C0392B;
  --color-info: #2563A6;
  --color-accent: #E6A23C;

  /* Semantic Background Tints */
  --color-success-bg: #EAF5EE;
  --color-warning-bg: #FEF6E7;
  --color-error-bg: #FDEDEC;
  --color-info-bg: #EBF3FA;
  --color-accent-bg: #FDF6EA;

  /* Typography Stack & Scale */
  --font-sans: 'Plus Jakarta Sans', 'Inter', 'Manrope', 'Noto Sans Devanagari', 'CareHindi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-hindi: 'Noto Sans Devanagari', 'CareHindi', 'Plus Jakarta Sans', 'Inter', 'Manrope', sans-serif;

  --text-hero: clamp(1.75rem, 3vw, 2.65rem);
  --text-h1: clamp(1.5rem, 2.4vw, 2.15rem);
  --text-h2: clamp(1.25rem, 1.9vw, 1.65rem);
  --text-h3: clamp(1.05rem, 1.3vw, 1.22rem);
  --text-body: 0.9375rem;
  --text-small: 0.84375rem;
  --text-xs: 0.78125rem;
  --text-price: clamp(1.35rem, 2vw, 1.8rem);

  /* Spacing & Radius Scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 3px rgba(16, 76, 56, 0.05);
  --shadow-sm: 0 4px 12px rgba(16, 76, 56, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 76, 56, 0.08);
  --shadow-focus: 0 0 0 3px rgba(23, 107, 77, 0.28);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea {
  font: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  line-height: 1.22;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-h1); font-weight: 700; }
h2 { font-size: var(--text-h2); font-weight: 700; }
h3, h4 { font-size: var(--text-h3); font-weight: 600; }

button {
  font-weight: 600;
}

input, select, textarea {
  font-weight: 400;
  font-size: 0.9375rem;
}

html[lang="hi"] body {
  font-family: var(--font-hindi);
  line-height: 1.68;
  letter-spacing: 0;
}

html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4 {
  font-family: var(--font-hindi);
  line-height: 1.36;
  letter-spacing: 0;
}