/* ═══════════════════════════════════════════════════════════════
   HUB TOKENS — Reconnect Yoga Therapy SEO Hub
   Design system inspired by Instituto Pūrna + Apple polish
   v1.0 — escopado em .hub para não conflitar com Squarespace
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ──────────────────────────────────────────────────────────────
     COLOR — Brand (Reconnect Rose)
     ────────────────────────────────────────────────────────────── */
  --hub-rose:        #c4727f;
  --hub-rose-soft:   #e8a0a8;
  --hub-rose-deep:   #a05d68;
  --hub-rose-darker: #6e3c46;
  --hub-rose-tint:   rgba(196, 114, 127, 0.08);
  --hub-rose-tint-2: rgba(196, 114, 127, 0.16);
  --hub-rose-glow:   rgba(196, 114, 127, 0.32);

  /* ──────────────────────────────────────────────────────────────
     COLOR — Earth / Cream (Pūrna inspiration)
     ────────────────────────────────────────────────────────────── */
  --hub-cream:    #fdf8f5;
  --hub-cream-2:  #f9f0e8;
  --hub-ivory:    #f7efe7;
  --hub-sand:     #e8d8c8;
  --hub-clay:     #c4a994;
  --hub-earth:    #8b6f5a;
  --hub-earth-deep: #5c4736;
  --hub-soil:     #3a2c20;

  /* ──────────────────────────────────────────────────────────────
     COLOR — Ink (text scale, warm tones)
     ────────────────────────────────────────────────────────────── */
  --hub-ink:       #2a1a10;
  --hub-ink-2:     #3b2a1a;
  --hub-ink-soft:  #5a4a3a;
  --hub-ink-mute:  #8a7a6a;
  --hub-ink-faint: #b89080;

  /* ──────────────────────────────────────────────────────────────
     COLOR — Surface
     ────────────────────────────────────────────────────────────── */
  --hub-surface-0: #ffffff;
  --hub-surface-1: var(--hub-cream);
  --hub-surface-2: var(--hub-ivory);
  --hub-surface-3: var(--hub-sand);
  --hub-surface-dark:   var(--hub-soil);
  --hub-surface-darker: #1f1611;

  /* ──────────────────────────────────────────────────────────────
     COLOR — Functional
     ────────────────────────────────────────────────────────────── */
  --hub-success: #6b8e4e;
  --hub-warning: #c89544;
  --hub-info:    #4a7a8e;
  --hub-danger:  #b3614a;

  --hub-star:    #e8a87c;     /* gold para reviews */

  /* ──────────────────────────────────────────────────────────────
     COLOR — Border & Divider
     ────────────────────────────────────────────────────────────── */
  --hub-border-faint:  rgba(58, 44, 32, 0.08);
  --hub-border-soft:   rgba(58, 44, 32, 0.14);
  --hub-border-base:   rgba(58, 44, 32, 0.22);
  --hub-border-strong: rgba(58, 44, 32, 0.4);

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — Family
     ────────────────────────────────────────────────────────────── */
  --hub-font-display: 'plus-jakarta-sans', 'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --hub-font-body:    'Quicksand', 'plus-jakarta-sans', system-ui, -apple-system, sans-serif;
  --hub-font-serif:   'Orpheus Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --hub-font-mono:    'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --hub-font-sans-skr: 'Noto Sans Devanagari', sans-serif;     /* mantras */

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — Scale (Apple-like clamp)
     ────────────────────────────────────────────────────────────── */
  --hub-fs-display: clamp(3rem, 6vw, 5.5rem);     /* 48–88px hero stamp */
  --hub-fs-hero:    clamp(2.5rem, 5vw, 4.5rem);   /* 40–72px hero h1 */
  --hub-fs-h1:      clamp(2rem, 3.5vw, 3rem);     /* 32–48px */
  --hub-fs-h2:      clamp(1.5rem, 2.5vw, 2.25rem); /* 24–36px */
  --hub-fs-h3:      clamp(1.25rem, 2vw, 1.625rem); /* 20–26px */
  --hub-fs-h4:      1.125rem;                      /* 18 */
  --hub-fs-h5:      1rem;                          /* 16 */
  --hub-fs-body-lg: 1.1875rem;                     /* 19 */
  --hub-fs-body:    1.0625rem;                     /* 17 — Apple body */
  --hub-fs-small:   0.9375rem;                     /* 15 */
  --hub-fs-meta:    0.8125rem;                     /* 13 */
  --hub-fs-overline: 0.75rem;                      /* 12 */
  --hub-fs-tiny:    0.6875rem;                     /* 11 */

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — Weight
     ────────────────────────────────────────────────────────────── */
  --hub-fw-light:    300;
  --hub-fw-regular:  400;
  --hub-fw-medium:   500;
  --hub-fw-semibold: 600;
  --hub-fw-bold:     700;
  --hub-fw-black:    800;

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — Line height
     ────────────────────────────────────────────────────────────── */
  --hub-lh-flat:   1;
  --hub-lh-tight:  1.1;
  --hub-lh-snug:   1.25;
  --hub-lh-normal: 1.5;
  --hub-lh-base:   1.6;
  --hub-lh-loose:  1.75;
  --hub-lh-relax:  2;

  /* ──────────────────────────────────────────────────────────────
     TYPOGRAPHY — Letter spacing (Apple-like tightness)
     ────────────────────────────────────────────────────────────── */
  --hub-ls-tighter: -0.04em;
  --hub-ls-tight:   -0.02em;
  --hub-ls-base:    0;
  --hub-ls-wide:    0.04em;
  --hub-ls-wider:   0.08em;
  --hub-ls-overline: 0.14em;

  /* ──────────────────────────────────────────────────────────────
     SPACING — 8pt grid
     ────────────────────────────────────────────────────────────── */
  --hub-sp-0:  0;
  --hub-sp-1:  4px;
  --hub-sp-2:  8px;
  --hub-sp-3:  12px;
  --hub-sp-4:  16px;
  --hub-sp-5:  20px;
  --hub-sp-6:  24px;
  --hub-sp-7:  28px;
  --hub-sp-8:  32px;
  --hub-sp-10: 40px;
  --hub-sp-12: 48px;
  --hub-sp-14: 56px;
  --hub-sp-16: 64px;
  --hub-sp-20: 80px;
  --hub-sp-24: 96px;
  --hub-sp-32: 128px;
  --hub-sp-40: 160px;
  --hub-sp-48: 192px;
  --hub-sp-56: 224px;

  /* Section paddings (responsive) */
  --hub-section-y: clamp(64px, 8vw, 128px);
  --hub-section-x: clamp(20px, 5vw, 80px);

  /* ──────────────────────────────────────────────────────────────
     CONTAINERS
     ────────────────────────────────────────────────────────────── */
  --hub-container-tight:  640px;
  --hub-container-narrow: 720px;
  --hub-container-base:   980px;
  --hub-container-wide:   1200px;
  --hub-container-xwide:  1400px;
  --hub-container-bleed:  100%;

  /* ──────────────────────────────────────────────────────────────
     RADIUS
     ────────────────────────────────────────────────────────────── */
  --hub-radius-none: 0;
  --hub-radius-xs:   4px;
  --hub-radius-sm:   8px;
  --hub-radius-md:   12px;
  --hub-radius-lg:   16px;
  --hub-radius-xl:   24px;
  --hub-radius-2xl:  32px;
  --hub-radius-3xl:  48px;
  --hub-radius-pill: 9999px;
  --hub-radius-circle: 50%;

  /* ──────────────────────────────────────────────────────────────
     SHADOWS — Apple-style 2-layer (key + ambient)
     ────────────────────────────────────────────────────────────── */
  --hub-shadow-xs: 0 1px 2px rgba(42, 26, 16, 0.04);
  --hub-shadow-sm: 0 1px 3px rgba(42, 26, 16, 0.06),
                   0 2px 8px rgba(42, 26, 16, 0.04);
  --hub-shadow-md: 0 2px 6px rgba(42, 26, 16, 0.06),
                   0 8px 24px rgba(42, 26, 16, 0.08);
  --hub-shadow-lg: 0 4px 12px rgba(42, 26, 16, 0.08),
                   0 16px 48px rgba(42, 26, 16, 0.12);
  --hub-shadow-xl: 0 8px 24px rgba(42, 26, 16, 0.10),
                   0 32px 72px rgba(42, 26, 16, 0.16);
  --hub-shadow-2xl: 0 16px 40px rgba(42, 26, 16, 0.14),
                    0 48px 96px rgba(42, 26, 16, 0.20);

  /* Inner shadows (depth) */
  --hub-shadow-inset-sm: inset 0 1px 2px rgba(42, 26, 16, 0.06);
  --hub-shadow-inset-md: inset 0 2px 4px rgba(42, 26, 16, 0.08);

  /* Glow (rose) */
  --hub-glow-rose-sm: 0 0 0 4px var(--hub-rose-tint);
  --hub-glow-rose-md: 0 0 0 6px var(--hub-rose-tint-2);
  --hub-glow-focus:   0 0 0 3px var(--hub-rose-tint-2);

  /* ──────────────────────────────────────────────────────────────
     MOTION — Easings & durations (Apple-tuned)
     ────────────────────────────────────────────────────────────── */
  --hub-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint */
  --hub-ease-in:      cubic-bezier(0.64, 0, 0.78, 0);
  --hub-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --hub-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --hub-ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);     /* Material */

  --hub-dur-instant:  80ms;
  --hub-dur-fast:     150ms;
  --hub-dur-base:     280ms;
  --hub-dur-slow:     500ms;
  --hub-dur-glide:    900ms;
  --hub-dur-cinema:   1400ms;

  /* ──────────────────────────────────────────────────────────────
     Z-INDEX
     ────────────────────────────────────────────────────────────── */
  --hub-z-base:     1;
  --hub-z-raised:   10;
  --hub-z-overlay:  100;
  --hub-z-sticky:   200;
  --hub-z-dropdown: 500;
  --hub-z-modal:    1000;
  --hub-z-toast:    2000;
  --hub-z-tooltip:  3000;

  /* ──────────────────────────────────────────────────────────────
     BREAKPOINTS (referência — usar em @media diretamente)
     ────────────────────────────────────────────────────────────── */
  /* sm:  ≥ 640px  */
  /* md:  ≥ 768px  */
  /* lg:  ≥ 1024px */
  /* xl:  ≥ 1280px */
  /* 2xl: ≥ 1536px */

  /* ──────────────────────────────────────────────────────────────
     GRADIENTS
     ────────────────────────────────────────────────────────────── */
  --hub-grad-cream:    linear-gradient(180deg, var(--hub-cream) 0%, var(--hub-ivory) 100%);
  --hub-grad-warm:     linear-gradient(135deg, var(--hub-cream) 0%, var(--hub-sand) 100%);
  --hub-grad-rose:     linear-gradient(135deg, var(--hub-rose) 0%, var(--hub-rose-deep) 100%);
  --hub-grad-rose-soft: linear-gradient(135deg, var(--hub-rose-soft) 0%, var(--hub-rose) 100%);
  --hub-grad-earth:    linear-gradient(180deg, var(--hub-earth) 0%, var(--hub-soil) 100%);
  --hub-grad-overlay-dark: linear-gradient(180deg, rgba(42,26,16,0) 0%, rgba(42,26,16,0.6) 100%);
  --hub-grad-fade-r:   linear-gradient(90deg, transparent 0%, var(--hub-cream) 100%);
  --hub-grad-fade-l:   linear-gradient(90deg, var(--hub-cream) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════════
   RESET — escopado em .hub para não vazar pra Squarespace
   ═══════════════════════════════════════════════════════════════ */

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

.hub {
  font-family: var(--hub-font-body);
  font-size: var(--hub-fs-body);
  font-weight: var(--hub-fw-regular);
  line-height: var(--hub-lh-base);
  color: var(--hub-ink-soft);
  background: var(--hub-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

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

/* ═══════════════════════════════════════════════════════════════
   ACESSIBILIDADE — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════
   FOCUS visível (Apple-style)
   ═══════════════════════════════════════════════════════════════ */

.hub :focus-visible {
  outline: none;
  box-shadow: var(--hub-glow-focus);
  border-radius: var(--hub-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════ */

.hub ::selection {
  background: var(--hub-rose-tint-2);
  color: var(--hub-ink);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS (Apple-thin no webkit)
   ═══════════════════════════════════════════════════════════════ */

.hub-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--hub-border-base) transparent;
}
.hub-scroll-thin::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.hub-scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.hub-scroll-thin::-webkit-scrollbar-thumb {
  background: var(--hub-border-base);
  border-radius: var(--hub-radius-pill);
}
.hub-scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--hub-earth);
}