/* ============================================================
 * REGLOW — design tokens
 * Editorial, warm, dance‑studio mood. Onyx + bone + glow.
 * All values flagged [ASSUMED] are inferred starting points.
 * ============================================================ */

/* ---- Fonts ------------------------------------------------- */
/* [SUBSTITUTE] Real wordmark font unknown — using Italiana from
   Google Fonts. Body is Hanken Grotesk (Cyrillic supported). */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  /* ---------- Color · foundation -------------------------- */
  --onyx:        #0E0B0A;   /* near‑black, brand default dark surface */
  --ink:         #1A1614;   /* slightly lifted onyx                   */
  --ink-2:       #221C19;   /* card surface on dark                   */
  --ink-30:      rgba(14, 11, 10, 0.30);  /* hairlines on bone        */
  --ink-60:      rgba(14, 11, 10, 0.60);  /* secondary text on bone   */
  --ink-90:      rgba(14, 11, 10, 0.90);  /* body text on bone        */

  --bone:        #F4EFE9;   /* warm off‑white, brand default light    */
  --bone-soft:   #EDE5DA;   /* secondary light surface                */
  --bone-20:     rgba(244, 239, 233, 0.20);  /* hairlines on onyx     */
  --bone-60:     rgba(244, 239, 233, 0.60);  /* secondary text/dark   */
  --bone-90:     rgba(244, 239, 233, 0.92);  /* body text on onyx     */

  /* ---------- Color · skin / champagne -------------------- */
  --champagne:   #D9B58C;
  --nude:        #E8C8B8;
  --rose-dust:   #C9968A;

  /* ---------- Color · glow accent (the brand) ------------- */
  --glow:        #E8A87C;          /* primary accent / CTA           */
  --glow-deep:   #C77A3E;          /* hover / pressed                */
  --glow-soft:   #F4C9A8;          /* tint, backgrounds              */
  --glow-grad:   radial-gradient(
                   ellipse at 50% 60%,
                   #F4C9A8 0%,
                   #E8A87C 32%,
                   #C77A3E 56%,
                   #2A1A12 82%,
                   #0E0B0A 100%
                 );

  /* ---------- Color · garnet (rare emphasis) -------------- */
  --garnet:      #6B1A2C;
  --garnet-ink:  #4A1220;

  /* ---------- Semantic ------------------------------------ */
  --bg:          var(--bone);
  --bg-alt:      var(--bone-soft);
  --bg-inverse:  var(--onyx);

  --fg:          var(--ink-90);
  --fg-2:        var(--ink-60);
  --fg-3:        var(--ink-30);
  --fg-inverse:  var(--bone-90);
  --fg-inverse-2: var(--bone-60);

  --accent:        var(--glow);
  --accent-hover:  var(--glow-deep);
  --accent-ink:    var(--onyx);   /* text color *on* glow */

  --border:        rgba(14, 11, 10, 0.16);
  --border-strong: rgba(14, 11, 10, 0.40);
  --border-inverse: rgba(244, 239, 233, 0.18);

  --focus:       var(--glow);

  /* ---------- Type · families ----------------------------- */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-sans:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type · scale (px) --------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;   /* base body  */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  40px;   /* H2         */
  --text-4xl:  64px;   /* H1         */
  --text-5xl:  96px;   /* display    */
  --text-6xl:  144px;  /* hero / splash */

  /* ---------- Type · leading ------------------------------ */
  --leading-display: 1.02;
  --leading-tight:   1.15;
  --leading-snug:    1.30;
  --leading-body:    1.50;
  --leading-loose:   1.70;

  /* ---------- Type · tracking ----------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.16em;   /* wordmark, eyebrow labels */

  /* ---------- Spacing scale (px) -------------------------- */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* ---------- Radii --------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadows ------------------------------------- */
  --shadow-soft:    0 1px 0 rgba(14,11,10,0.04), 0 8px 24px -8px rgba(14,11,10,0.12);
  --shadow-lift:    0 2px 0 rgba(14,11,10,0.04), 0 18px 40px -12px rgba(14,11,10,0.22);
  --shadow-glow:    0 0 0 1px rgba(232,168,124,0.35),
                    0 12px 60px -10px rgba(232,168,124,0.45);
  --shadow-glow-strong: 0 0 0 1px rgba(232,168,124,0.55),
                    0 18px 80px -8px rgba(232,168,124,0.65);
  --shadow-inset-hairline: inset 0 0 0 0.5px rgba(14,11,10,0.30);

  /* ---------- Motion -------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.05, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    320ms;
  --dur-slower:  600ms;
  --dur-glow:   1600ms;

  /* ---------- Layout -------------------------------------- */
  --container-max: 1280px;
  --gutter-desktop: 80px;
  --gutter-mobile: 24px;
  --topbar-h: 72px;
}

/* ============================================================
 * Semantic element styles — drop‑in defaults
 * ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--glow); color: var(--onyx); }

/* ---- Display & headings ----------------------------------- */
.r-display,
.r-h1,
.r-h2,
.r-eyebrow { font-family: var(--font-display); }

.r-display {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, var(--text-6xl));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.r-h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.r-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  letter-spacing: 0;
  font-weight: 400;
}

.r-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
}

.r-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}

.r-wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 400;
}

/* ---- Body ------------------------------------------------- */
.r-body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg);
  text-wrap: pretty;
}

.r-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
  text-wrap: pretty;
}

.r-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.r-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

.r-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, var(--text-3xl));
  line-height: 1.2;
  color: var(--fg);
}

/* ---- Links ------------------------------------------------ */
.r-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.r-link:hover { text-decoration-thickness: 2px; opacity: 0.78; }

/* ---- Buttons ---------------------------------------------- */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.r-btn:active { transform: translateY(1px); }
.r-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.r-btn--primary {
  background: var(--glow);
  color: var(--accent-ink);
  box-shadow: var(--shadow-glow);
}
.r-btn--primary:hover { background: var(--glow-deep); box-shadow: var(--shadow-glow-strong); }

.r-btn--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.r-btn--ghost:hover { background: rgba(14,11,10,0.05); }

.r-btn--ghost-inv {
  background: transparent;
  color: var(--fg-inverse);
  box-shadow: inset 0 0 0 1px var(--border-inverse);
}
.r-btn--ghost-inv:hover { background: rgba(244,239,233,0.08); }

.r-btn--link {
  background: transparent;
  height: auto;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  box-shadow: none;
}

.r-btn--sm { height: 36px; padding: 0 var(--sp-4); font-size: var(--text-sm); }
.r-btn--lg { height: 56px; padding: 0 var(--sp-8); font-size: var(--text-lg); }

/* ---- Inputs ----------------------------------------------- */
.r-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-4);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out);
  border-radius: 0;
}
.r-input:focus { outline: 0; border-bottom-color: var(--glow); }
.r-input::placeholder { color: var(--fg-3); }

/* ---- Chip / pill ------------------------------------------ */
.r-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.r-chip:hover { background: rgba(14,11,10,0.05); }
.r-chip[aria-selected="true"],
.r-chip.is-active { background: var(--onyx); color: var(--bone); box-shadow: none; }

/* ---- Card ------------------------------------------------- */
.r-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--sp-6);
}
.r-card--inverse {
  background: var(--ink-2);
  color: var(--fg-inverse);
}

/* ---- Page surfaces ---------------------------------------- */
.r-surface-onyx { background: var(--onyx); color: var(--fg-inverse); }
.r-surface-bone { background: var(--bone); color: var(--fg); }
.r-surface-glow {
  background: var(--glow-grad);
  color: var(--bone);
}

/* ---- Utilities -------------------------------------------- */
.r-divider { height: 1px; background: var(--border); border: 0; }
.r-divider--inverse { background: var(--border-inverse); }

.r-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 900px) { .r-container { padding: 0 var(--gutter-desktop); } }