/* ── Fonts ──────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('fonts/poppins-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --min-screen-width: 320px;
  --max-screen-width: 1280px;

  /* Fonts */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Typography Scale */
  --text-xs: clamp(0.66rem, calc(-0.16vw + 0.69rem), 0.56rem);
  --text-s: clamp(0.82rem, calc(-0.05vw + 0.83rem), 0.8rem);
  --text-m: clamp(1.03rem, calc(0.16vw + 1rem), 1.13rem);
  --text-l: clamp(1.29rem, calc(0.5vw + 1.19rem), 1.59rem);
  --text-xl: clamp(1.61rem, calc(1.06vw + 1.4rem), 2.25rem);
  --text-2xl: clamp(2.01rem, calc(1.94vw + 1.63rem), 3.18rem);
  --text-3xl: clamp(2.52rem, calc(3.3vw + 1.86rem), 4.5rem);
  --text-4xl: clamp(3.15rem, calc(5.35vw + 2.08rem), 6.36rem);

  /* Spacing Scale */
  --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
  --space-s: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-m: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-l: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-2xl: clamp(3rem, 2.5rem + 3.5vw, 6rem);
  --space-3xl: clamp(4rem, 3rem + 5vw, 8rem);

  /* Brand – Primary (Gold #E6B800) */
  --primary: hsla(48, 100%, 45%, 1);
  --primary-5: hsla(48, 100%, 45%, 0.05);
  --primary-10: hsla(48, 100%, 45%, 0.1);
  --primary-20: hsla(48, 100%, 45%, 0.2);
  --primary-30: hsla(48, 100%, 45%, 0.3);
  --primary-40: hsla(48, 100%, 45%, 0.4);
  --primary-50: hsla(48, 100%, 45%, 0.5);
  --primary-60: hsla(48, 100%, 45%, 0.6);
  --primary-70: hsla(48, 100%, 45%, 0.7);
  --primary-80: hsla(48, 100%, 45%, 0.8);
  --primary-90: hsla(48, 100%, 45%, 0.9);
  --primary-d-1: hsla(46, 95%, 37%, 1);
  --primary-d-2: hsla(44, 90%, 29%, 1);
  --primary-d-3: hsla(42, 85%, 21%, 1);
  --primary-d-4: hsla(40, 80%, 13%, 1);
  --primary-l-1: hsla(50, 100%, 55%, 1);
  --primary-l-2: hsla(52, 100%, 65%, 1);
  --primary-l-3: hsla(54, 100%, 75%, 1);
  --primary-l-4: hsla(56, 100%, 85%, 1);

  /* Brand – Secondary */
  --secondary: hsla(0, 94%, 68%, 1);
  --secondary-5: hsla(0, 94%, 68%, 0.05);
  --secondary-10: hsla(0, 94%, 68%, 0.1);
  --secondary-20: hsla(0, 94%, 68%, 0.2);
  --secondary-30: hsla(0, 94%, 68%, 0.3);
  --secondary-40: hsla(0, 94%, 68%, 0.4);
  --secondary-50: hsla(0, 94%, 68%, 0.5);
  --secondary-60: hsla(0, 94%, 68%, 0.6);
  --secondary-70: hsla(0, 94%, 68%, 0.7);
  --secondary-80: hsla(0, 94%, 68%, 0.8);
  --secondary-90: hsla(0, 94%, 68%, 0.9);
  --secondary-d-1: hsla(1, 50%, 53%, 1);
  --secondary-d-2: hsla(1, 42%, 40%, 1);
  --secondary-d-3: hsla(2, 40%, 26%, 1);
  --secondary-d-4: hsla(4, 35%, 14%, 1);
  --secondary-l-1: hsla(3, 100%, 75%, 1);
  --secondary-l-2: hsla(5, 100%, 81%, 1);
  --secondary-l-3: hsla(6, 100%, 87%, 1);
  --secondary-l-4: hsla(7, 100%, 93%, 1);

  /* Semantic */
  --bg-body: #F7F5F0;
  --bg-surface: #EDEAE3;
  --text-body: #363534;
  --text-title: #0F0E0C;
  --border-primary: #D9D5CC;
  --shadow-primary: hsla(0, 0%, 0%, 0.15);

  /* Utility – Light */
  --light: hsla(0, 0%, 100%, 1);
  --light-5: hsla(0, 0%, 100%, 0.05);
  --light-10: hsla(0, 0%, 100%, 0.1);
  --light-20: hsla(0, 0%, 100%, 0.2);
  --light-30: hsla(0, 0%, 100%, 0.3);
  --light-40: hsla(0, 0%, 100%, 0.4);
  --light-50: hsla(0, 0%, 100%, 0.5);
  --light-60: hsla(0, 0%, 100%, 0.6);
  --light-70: hsla(0, 0%, 100%, 0.7);
  --light-80: hsla(0, 0%, 100%, 0.8);
  --light-90: hsla(0, 0%, 100%, 0.9);

  /* Utility – Dark */
  --dark: hsla(0, 0%, 0%, 1);
  --dark-5: hsla(0, 0%, 0%, 0.05);
  --dark-10: hsla(0, 0%, 0%, 0.1);
  --dark-20: hsla(0, 0%, 0%, 0.2);
  --dark-30: hsla(0, 0%, 0%, 0.3);
  --dark-40: hsla(0, 0%, 0%, 0.4);
  --dark-50: hsla(0, 0%, 0%, 0.5);
  --dark-60: hsla(0, 0%, 0%, 0.6);
  --dark-70: hsla(0, 0%, 0%, 0.7);
  --dark-80: hsla(0, 0%, 0%, 0.8);
  --dark-90: hsla(0, 0%, 0%, 0.9);

  /* Status */
  --success: hsla(136, 95%, 40%, 1);
  --success-5: hsla(136, 95%, 56%, 0.05);
  --success-10: hsla(136, 95%, 56%, 0.1);
  --success-20: hsla(136, 95%, 56%, 0.2);
  --error: hsla(351, 95%, 56%, 1);
  --error-5: hsla(351, 95%, 56%, 0.05);
  --error-10: hsla(351, 95%, 56%, 0.1);
  --error-20: hsla(351, 95%, 56%, 0.2);

  /* Grid */
  --columns-1: repeat(1, minmax(0, 1fr));
  --columns-2: repeat(2, minmax(0, 1fr));
  --columns-3: repeat(3, minmax(0, 1fr));
  --columns-4: repeat(4, minmax(0, 1fr));
  --columns-5: repeat(5, minmax(0, 1fr));
  --columns-6: repeat(6, minmax(0, 1fr));
  --columns-7: repeat(7, minmax(0, 1fr));
  --columns-8: repeat(8, minmax(0, 1fr));

  /* Border Radius */
  --radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
  --radius-s: clamp(0.38rem, calc(-0.19vw + 0.54rem), 0.5rem);
  --radius-m: clamp(0.63rem, calc(-0.19vw + 0.79rem), 0.75rem);
  --radius-l: clamp(1rem, calc(-0.37vw + 1.32rem), 1.25rem);
  --radius-xl: clamp(1.63rem, calc(-0.56vw + 2.11rem), 2rem);
  --radius-full: 999rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px var(--shadow-primary);
  --shadow-s: 0 1.5px 3px var(--shadow-primary);
  --shadow-m: 0 2px 6px var(--shadow-primary);
  --shadow-l: 0 3px 12px var(--shadow-primary);
  --shadow-xl: 0 6px 48px var(--shadow-primary);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--text-body);
  background-color: var(--bg-body);
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
}

header, main, footer {
  display: block;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-title);
  margin-bottom: var(--space-m);
}

h1 { font-size: var(--text-3xl); line-height: 1.0; }
h2 { font-size: var(--text-2xl); line-height: 1.1; }
h3 { font-size: var(--text-2xl); line-height: 1.3; }
h4 { font-size: var(--text-xl);  line-height: 1.3; }
h5 { font-size: var(--text-l);   line-height: 1.3; }
h6 { font-size: var(--text-m);   line-height: 1.4; }

p {
  margin-bottom: var(--space-m);
}