/* ============================================================
   AirbnbTutorials — Design Tokens
   Source of truth: reference/airbnbtutorials-design-kit-FULL.md
   Standalone web edition: no Elementor / Kadence overrides.
   Use via var(--token-name) in component styles.
   ============================================================ */

:root {
  /* ─── Core Palette ─── */
  --at-dark:           #0b0f14;
  --at-midnight:       #0b008f;
  --at-deep-teal:      #1e6e6d;
  --at-soft-teal:      #BFE3E0;
  --at-cream:          #fdfcfb;
  --at-gold:           #c9b07a;
  --at-cta-teal:       #45C4B0;
  --at-cta-teal-hover: #5ED6C3;
  --at-cta-dark-text:  #06201D;

  /* ─── Text on Dark Sections ─── */
  --txt-head-dark:     #f2efe8;
  --txt-sub-dark:      rgba(244, 241, 234, 0.54);
  --txt-body-dark:     rgba(220, 228, 238, 0.82);
  --txt-body-alt-dark: rgba(210, 215, 225, 0.80);
  --txt-muted-dark:    rgba(210, 215, 225, 0.40);
  --txt-faint-dark:    rgba(170, 185, 200, 0.52);

  /* ─── Text on Light Sections ─── */
  --txt-head-light:    #1a1f2b;
  --txt-body-light:    #2e3442;
  --txt-muted-light:   #5a6575;
  --txt-faint-light:   #7a8698;
  --txt-kicker-light:  #4a6e78;

  /* ─── Glass + Surface ─── */
  --glass-bg:          rgba(255, 255, 255, 0.07);
  --glass-bg-mobile:   rgba(255, 255, 255, 0.08);
  --glass-bg-readable: rgba(10, 18, 34, 0.72); /* over bright bg images */
  --glass-border:      rgba(255, 255, 255, 0.12);
  --glass-fallback:    rgba(14, 22, 40, 0.86);
  --card-bg-light:     rgba(255, 255, 255, 0.82);
  --card-border-light: rgba(0, 0, 0, 0.06);

  /* ─── Teal Accent System ─── */
  --teal-dot:      rgba(69, 196, 176, 0.58);
  --teal-ring:     rgba(69, 196, 176, 0.14);
  --teal-glow:     rgba(69, 196, 176, 0.12);
  --teal-soft-bg:  rgba(69, 196, 176, 0.07);
  --teal-border:   rgba(69, 196, 176, 0.22);

  /* ─── Layout ─── */
  --container-wide:    1160px;
  --container-narrow:  820px;
  --side-pad:          clamp(35px, 5vw, 48px);
  --side-pad-xs:       28px;
  --section-pad-y:     clamp(64px, 7vw, 112px);

  /* ─── Typography ─── */
  --font-head: 'Playfair Display', 'Baskervville', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Type scale ─── */
  --fs-h1-main:  clamp(2.2rem, 3.6vw + 0.5rem, 3.60rem);
  --fs-h1-sub:   clamp(1.0rem, 1.6vw + 0.25rem, 1.70rem);
  --fs-h2-light: clamp(1.40rem, 2.0vw + 0.4rem, 2.20rem);
  --fs-h2-dark:  clamp(1.50rem, 2.2vw + 0.4rem, 2.40rem);
  --fs-h3:       clamp(1.0rem, 0.78vw + 0.36rem, 1.22rem);
  --fs-body:     clamp(0.92rem, 0.58vw + 0.30rem, 1.06rem);

  /* ─── Motion ─── */
  --t-fast:    0.18s ease;
  --t-default: 0.2s ease;
  --t-slow:    0.3s ease;

  /* ─── Radius ─── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 28px;
}