/* =========================================================
   AHA COMFORTS — base.css
   Resets, design tokens, and base typography.
   ========================================================= */

:root {
  /* ---- Ink / charcoal ---- */
  --color-ink:          #171411;
  --color-ink-mid:      #211D1A;
  --color-ink-soft:     #29231E;
  --color-ink-warm:     #44382B;

  --color-charcoal:     #171411;
  --color-charcoal-soft:#5B5245;
  --color-charcoal-faint:#8A8072;

  /* ---- Ivory / sand ---- */
  --color-ivory-bright: #FFFDF9;
  --color-ivory:        #FAF6EF;
  --color-ivory-dim:    #F3ECDD;
  --color-cream:        #F1E9DA;
  --color-sand:         #EEE0C8;
  --color-white:        #FFFFFF;

  /* ---- Champagne / gold ---- */
  --color-champagne:    #E9DCC0;
  --color-champagne-mid:#E2C27D;
  --color-champagne-deep:#D9B978;
  --color-gold-deep:    #8C6A3D;
  --color-gold:         #B08D57;
  --color-gold-light:   #C9A35F;
  --color-gold-pale:    #E9DCC0;
  --color-gold-glow:    rgba(176, 141, 87, 0.18);

  /* ---- Gradients ---- */
  --gradient-gold:      linear-gradient(135deg, #8C6A3D 0%, #B08D57 45%, #E2C27D 100%);
  --gradient-gold-soft: linear-gradient(135deg, #F3ECDD 0%, #E9DCC0 50%, #D9B978 100%);
  --gradient-ivory:     linear-gradient(135deg, #FFFDF9 0%, #FAF6EF 50%, #F1E9DA 100%);
  --gradient-dark:      linear-gradient(135deg, #171411 0%, #29231E 50%, #44382B 100%);
  --gradient-section:   linear-gradient(180deg, #FAF6EF 0%, #F3ECDD 100%);
  --gradient-glow:      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(226, 194, 125, 0.22), transparent 62%);
  --gradient-warm-floor: linear-gradient(180deg, transparent 0%, rgba(243, 236, 221, 0.65) 100%);

  /* ---- Atmospheric surfaces ---- */
  --surface-ivory:      rgba(255, 253, 249, 0.72);
  --surface-champagne:  rgba(233, 220, 192, 0.35);
  --border-soft:        rgba(233, 220, 192, 0.45);
  --border-gold:        rgba(201, 163, 95, 0.42);

  /* ---- Type ---- */
  --font-display: 'DM Serif Display', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-button:  'Poppins', -apple-system, sans-serif;

  --fs-hero:   clamp(3rem, 7vw, 6rem);
  --fs-h1:     clamp(2.4rem, 4.6vw, 4rem);
  --fs-h2:     clamp(2.2rem, 4vw, 3.5rem);
  --fs-h3:     clamp(1.4rem, 2.1vw, 1.85rem);
  --fs-lead:   clamp(1.05rem, 1.4vw, 1.28rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-eyebrow: 0.76rem;

  /* ---- Spacing rhythm ---- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.25rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  6rem;
  --space-2xl: 9rem;

  --section-pad: clamp(4.75rem, 10vw, 9.5rem);
  --container-max: 1360px;
  --container-narrow: 820px;

  /* ---- Motion ---- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-soft:  0 24px 60px -30px rgba(38, 33, 29, 0.28);
  --shadow-card:  0 30px 80px -35px rgba(38, 33, 29, 0.35);
  --shadow-deep:  0 40px 90px -32px rgba(38, 33, 29, 0.42);
  --shadow-gold:  0 18px 48px -16px rgba(140, 106, 61, 0.45);
  --shadow-nav:   0 20px 50px -28px rgba(23, 20, 17, 0.4);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-charcoal-soft);
  background:
    radial-gradient(ellipse 80% 46% at 100% 0%, rgba(226, 194, 125, 0.1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 0% 18%, rgba(233, 220, 192, 0.35), transparent 50%),
    var(--gradient-ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

ul, ol { list-style: none; margin: 0; padding: 0; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-charcoal);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.016em; }

p { margin: 0; }

::selection {
  background: var(--color-gold);
  color: var(--color-white);
}

/* Visible keyboard focus — accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.btn:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

/* Eyebrow / label typography used across sections */
.eyebrow {
  font-family: var(--font-button);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}

.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gradient-gold);
  display: inline-block;
}