/*
 * HOSAENA system foundation.
 *
 * Tokens, base rules, and reusable primitives only.
 * No components, commerce UI, headers, or page architecture.
 */

:root {
  /* Palette */
  --ho-color-nero: #0f0f0f;
  --ho-color-nero-soft: #1a1a1a;
  --ho-color-ivory: #eae7e1;
  --ho-color-ivory-soft: #efe9de;
  --ho-color-calacatta: #f7f3ec;
  --ho-color-gold: #c1a46d;
  --ho-color-bronze: #8c7851;
  --ho-color-sage: #b8bdb5;
  --ho-color-slate: #2b2b2b;
  --ho-color-border: rgba(15, 15, 15, 0.08);
  --ho-color-border-strong: rgba(15, 15, 15, 0.18);
  --ho-color-overlay: rgba(17, 17, 17, 0.28);
  --ho-color-fade: rgba(0, 0, 0, 0.04);

  /* Typography */
  --ho-type-display: "Cormorant Garamond", serif;
  --ho-font-display: var(--ho-type-display);
  --ho-font-body: "Lato", sans-serif;

  --ho-text-display-xl: clamp(5rem, 10vw, 9rem);
  --ho-text-display-lg: clamp(4rem, 8vw, 7rem);
  --ho-text-display: clamp(4rem, 8vw, 8rem);
  --ho-text-h1: clamp(3rem, 6vw, 5.5rem);
  --ho-text-h2: clamp(2.25rem, 4.2vw, 3.75rem);
  --ho-text-h3: clamp(1.75rem, 3vw, 2.75rem);
  --ho-text-h4: clamp(1.375rem, 2.2vw, 2rem);
  --ho-text-h5: clamp(1.125rem, 1.6vw, 1.5rem);
  --ho-text-h6: clamp(1rem, 1.2vw, 1.25rem);
  --ho-text-body-lg: clamp(1rem, 1.2vw, 1.125rem);
  --ho-text-body: 1rem;
  --ho-text-body-sm: clamp(0.875rem, 0.9vw, 0.9375rem);
  --ho-text-eyebrow: 0.7rem;
  --ho-text-meta: 0.75rem;
  --ho-text-quote: clamp(1.75rem, 3vw, 3rem);

  --ho-leading-display: 1.05;
  --ho-leading-heading: 1.15;
  --ho-leading-body: 1.45;
  --ho-leading-tight: 1.25;

  --ho-track-display: 0.03em;
  --ho-track-editorial: 0.08em;
  --ho-track-meta: 0.14em;
  --ho-tracking-eyebrow: 0.18em;
  --ho-tracking-meta: 0.14em;

  /* Spacing */
  --ho-space-4: 0.25rem;
  --ho-space-8: 0.5rem;
  --ho-space-12: 0.75rem;
  --ho-space-16: 1rem;
  --ho-space-20: 1.25rem;
  --ho-space-24: 1.5rem;
  --ho-space-32: 2rem;
  --ho-space-40: 2.5rem;
  --ho-space-48: 3rem;
  --ho-space-56: 3.5rem;
  --ho-space-64: 4rem;
  --ho-space-72: 4.5rem;
  --ho-space-80: 5rem;
  --ho-space-96: 6rem;
  --ho-space-120: 7.5rem;

  --ho-section-sm: clamp(2rem, 3vw, 3rem);
  --ho-section-md: clamp(3rem, 5vw, 5rem);
  --ho-section-lg: clamp(5rem, 8vw, 8rem);
  --ho-section-xl: clamp(6rem, 8vw, 8rem);
  --ho-section-xxl: clamp(8rem, 10vw, 12rem);

  /* Layout */
  --ho-container-max: 90rem;
  --ho-container-wide: 100rem;
  --ho-container-narrow: 62.5rem;
  --ho-container-text: 45rem;
  --ho-container-pad: clamp(1.25rem, 4vw, 5rem);
  --ho-shell-pad: var(--ho-container-pad);

  --ho-width-xxs: 28rem;
  --ho-width-xs: 36rem;
  --ho-width-sm: 45rem;
  --ho-width-md: 62.5rem;
  --ho-width-lg: 75rem;
  --ho-width-xl: 90rem;

  /* Surface */
  --ho-radius-sm: 0.25rem;
  --ho-radius-md: 0.5rem;
  --ho-radius-lg: 1.25rem;
  --ho-shadow-soft: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
  --ho-shadow-card: 0 18px 50px rgba(17, 17, 17, 0.08);

  /* Motion */
  --ho-ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
  --ho-speed-base: 240ms;

  /* Header system */
  --ho-header-migrate: 0;
  --ho-header-max: var(--ho-container-max, 96rem);
  --ho-header-shell-pad: clamp(1.5rem, 2vw, 5rem);
  --ho-header-nav-gap: clamp(1.2rem, 1.4vw, 2.2rem);
  --ho-header-utils-gap-left: clamp(0.82rem, 1vw, 1.28rem);
  --ho-header-utils-gap-right: clamp(0.68rem, 0.88vw, 1.08rem);
  --ho-header-logo-row-min: clamp(4.18rem, 4.32vw, 4.9rem);
  --ho-header-logo-row-pad: 0.42rem;
  --ho-header-nav-row-min: 2.08rem;
  --ho-header-title-pad-bottom: 0.44rem;
  --ho-header-underline-offset: -0.22rem;
  --ho-header-underline-width: 1.48rem;
  --ho-header-surface-solid: var(--ho-color-calacatta, var(--ho-color-ivory));
  --ho-header-surface-glass: rgb(247 243 236 / 92%);
  --ho-header-ink-top: var(--ho-color-ivory, #f7f3ec);
  --ho-header-ink-solid: var(--ho-color-nero);
  --ho-header-border: var(--ho-color-border);
  --ho-header-shadow: var(--ho-shadow-soft, 0 10px 24px rgb(0 0 0 / 6%));
  --ho-header-speed: 280ms;
  --ho-header-surface-speed: 300ms;
  --ho-header-underline-speed: 220ms;
  --ho-header-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ho-header-underline-ease: cubic-bezier(0.3, 0.15, 0.2, 1);

  /*
   * Semantic theme-prep aliases extracted from the legacy global system.
   *
   * These intentionally mirror the current light-mode visuals so we can start
   * migrating page CSS away from raw literals without changing the site today.
   */
  --ho-surface-page: var(--ho-color-calacatta);
  --ho-surface-page-alt: var(--ho-color-ivory);
  --ho-surface-page-soft: var(--ho-color-ivory-soft);
  --ho-surface-card: #ffffff;
  --ho-surface-card-muted: var(--ho-color-ivory-soft);
  --ho-surface-inverse: var(--ho-color-nero);
  --ho-text-muted: rgba(15, 15, 15, 0.62);
  --ho-text-subtle: rgba(15, 15, 15, 0.46);
  --ho-text-inverse: var(--ho-color-ivory);
  --ho-border-quiet: rgba(15, 15, 15, 0.05);
  --ho-overlay-soft: rgba(17, 17, 17, 0.18);
  --ho-overlay-strong: rgba(17, 17, 17, 0.48);
  --ho-shadow-medium: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.1);
  --ho-shadow-heavy: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.18);

  /* Legacy ho aliases still consumed by active Elementor CSS */
  --ho-muted: rgba(0, 0, 0, 0.55);
  --ho-slate: #2b2b2b;
  --ho-nero: #0f0f0f;
  --ho-container: 1300px;
  --ho-bg-soft: #f4f1ea;
  --ho-text-primary: #0f0f0f;
  --ho-border-soft: rgba(0, 0, 0, 0.08);
  --ho-border-strong: var(--ho-color-border-strong);
  --ho-accent-gold: var(--ho-color-gold);
  --ho-type-h1: 4rem;
  --ho-type-h2: 2.5rem;
  --ho-type-h3: 1.75rem;
  --ho-type-body: 1rem;
  --ho-type-small: 0.875rem;
  --ho-Body: 1.45em;
  --ho-small-texts: 1.4em;

  /* Elementor -> HOSAENA token bridge */
  --e-global-color-primary: var(--ho-color-nero);
  --e-global-color-secondary: var(--ho-color-gold);
  --e-global-color-text: var(--ho-color-nero);
  --e-global-color-accent: var(--ho-color-bronze);

  /* Fallback generic tokens */
  --bg: var(--ho-color-calacatta);
  --text: var(--ho-color-nero);
  --shadow: var(--ho-color-border);

  /* Typography alignment */
  --HEADINGS: var(--ho-color-nero);

  /* Ratios */
  --ho-ratio-square: 1 / 1;
  --ho-ratio-portrait: 4 / 5;
  --ho-ratio-editorial: 3 / 4;
  --ho-ratio-landscape: 16 / 9;
  --ho-ratio-banner: 21 / 9;

  /* Astra normalization */
  --ast-container-default-xlg-padding: 0;
  --ast-container-default-lg-padding: 0;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ho-font-body);
  font-size: var(--ho-text-body);
  line-height: var(--ho-leading-body);
  color: var(--ho-color-nero);
  background: var(--ho-color-ivory);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ho-font-display);
  margin: 0;
}

h1 {
  font-size: var(--ho-text-h1);
  line-height: var(--ho-leading-display);
}

h2 {
  font-size: var(--ho-text-h2);
  line-height: var(--ho-leading-heading);
}

h3 {
  font-size: var(--ho-text-h3);
}

h4 {
  font-size: var(--ho-text-h4);
}

p {
  margin: 0;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 200ms var(--ho-ease-soft);
}

a:hover {
  opacity: 0.8;
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: rgba(193, 164, 109, 0.22);
}

::-moz-selection {
  background: rgba(193, 164, 109, 0.22);
}

.e-con {
  --container-default-padding-block-start: 0;
  --container-default-padding-block-end: 0;
  --container-default-padding-inline-start: 0;
  --container-default-padding-inline-end: 0;
  --container-default-gap: 0;
  --widgets-spacing: 0;
}

.ho-container,
.ho-container-wide,
.ho-container-narrow,
.ho-container-text {
  width: 100%;
  margin-inline: auto;
}

.ho-container {
  max-width: var(--ho-container-max);
  padding-inline: var(--ho-container-pad);
}

.ho-container-wide {
  max-width: var(--ho-container-wide);
  padding-inline: var(--ho-container-pad);
}

.ho-container-narrow {
  max-width: var(--ho-container-narrow);
}

.ho-container-text {
  max-width: var(--ho-container-text);
}

.ho-section {
  padding-block: clamp(3rem, 5vw, 5rem);
}

.ho-section-sm {
  padding-block: var(--ho-section-sm);
}

.ho-section-md {
  padding-block: var(--ho-section-md);
}

.ho-section-lg {
  padding-block: var(--ho-section-lg);
}

.ho-section-xl {
  padding-block: var(--ho-section-xl);
}

.ho-section-shell,
.ho-px-shell {
  padding-inline: var(--ho-shell-pad);
}

.ho-flex {
  display: flex;
}

.ho-flex-col {
  display: flex;
  flex-direction: column;
}

.ho-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ho-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ho-grid {
  display: grid;
  gap: var(--ho-space-24);
}

.ho-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ho-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ho-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ho-flex > *,
.ho-flex-col > *,
.ho-flex-center > *,
.ho-flex-between > *,
.ho-grid > *,
.ho-grid-2 > *,
.ho-grid-3 > *,
.ho-grid-4 > * {
  min-width: 0;
}

.ho-w-xxs {
  max-width: var(--ho-width-xxs);
  margin-inline: auto;
}

.ho-w-xs {
  max-width: var(--ho-width-xs);
  margin-inline: auto;
}

.ho-w-sm {
  max-width: var(--ho-width-sm);
  margin-inline: auto;
}

.ho-w-md {
  max-width: var(--ho-width-md);
  margin-inline: auto;
}

.ho-w-lg {
  max-width: var(--ho-width-lg);
  margin-inline: auto;
}

.ho-w-xl {
  max-width: var(--ho-width-xl);
  margin-inline: auto;
}

.ho-gap-8 {
  gap: var(--ho-space-8);
}

.ho-gap-12 {
  gap: var(--ho-space-12);
}

.ho-gap-16 {
  gap: var(--ho-space-16);
}

.ho-gap-20 {
  gap: var(--ho-space-20);
}

.ho-gap-24 {
  gap: var(--ho-space-24);
}

.ho-gap-32 {
  gap: var(--ho-space-32);
}

.ho-gap-40 {
  gap: var(--ho-space-40);
}

.ho-gap-48 {
  gap: var(--ho-space-48);
}

.ho-gap-56 {
  gap: var(--ho-space-56);
}

.ho-stack > * + * {
  margin-top: var(--ho-space-24);
}

.ho-stack-8 > * + * {
  margin-top: var(--ho-space-8);
}

.ho-stack-12 > * + * {
  margin-top: var(--ho-space-12);
}

.ho-stack-16 > * + * {
  margin-top: var(--ho-space-16);
}

.ho-stack-24 > * + * {
  margin-top: var(--ho-space-24);
}

.ho-stack-32 > * + * {
  margin-top: var(--ho-space-32);
}

.ho-stack-48 > * + * {
  margin-top: var(--ho-space-48);
}

.ho-stack-56 > * + * {
  margin-top: var(--ho-space-56);
}

.ho-stack-64 > * + * {
  margin-top: var(--ho-space-64);
}

.ho-stack-72 > * + * {
  margin-top: var(--ho-space-72);
}

.ho-mt-16 {
  margin-top: var(--ho-space-16);
}

.ho-mt-24 {
  margin-top: var(--ho-space-24);
}

.ho-mt-32 {
  margin-top: var(--ho-space-32);
}

.ho-mt-48 {
  margin-top: var(--ho-space-48);
}

.ho-mb-16 {
  margin-bottom: var(--ho-space-16);
}

.ho-mb-24 {
  margin-bottom: var(--ho-space-24);
}

.ho-mb-32 {
  margin-bottom: var(--ho-space-32);
}

.ho-mb-48 {
  margin-bottom: var(--ho-space-48);
}

.ho-py-sm {
  padding-block: var(--ho-section-sm);
}

.ho-py-md {
  padding-block: var(--ho-section-md);
}

.ho-py-lg {
  padding-block: var(--ho-section-lg);
}

.ho-py-xl {
  padding-block: var(--ho-section-xl);
}

.ho-display,
.ho-display-xl,
.ho-display-lg,
.ho-h1,
.ho-h2,
.ho-h3,
.ho-h4,
.ho-h5,
.ho-h6,
.ho-editorial-quote {
  margin: 0;
  font-family: var(--ho-font-display);
  color: var(--ho-color-nero);
  font-weight: 500;
}

.ho-body-lg,
.ho-body,
.ho-body-sm,
.ho-meta,
.ho-overline,
.ho-kicker {
  font-family: var(--ho-font-body);
}

.ho-display {
  font-size: var(--ho-text-display);
  line-height: var(--ho-leading-display);
  letter-spacing: var(--ho-track-display);
}

.ho-display-xl {
  font-size: var(--ho-text-display-xl);
  line-height: 1.02;
  letter-spacing: 0.04em;
}

.ho-display-lg {
  font-size: var(--ho-text-display-lg);
  line-height: 1.06;
  letter-spacing: 0.035em;
}

.ho-h1 {
  font-size: var(--ho-text-h1);
  line-height: var(--ho-leading-display);
  letter-spacing: var(--ho-track-display);
}

.ho-h2 {
  font-size: var(--ho-text-h2);
  line-height: var(--ho-leading-heading);
  letter-spacing: 0.025em;
}

.ho-h3 {
  font-size: var(--ho-text-h3);
  line-height: var(--ho-leading-heading);
  letter-spacing: 0.02em;
}

.ho-h4 {
  font-size: var(--ho-text-h4);
  line-height: var(--ho-leading-heading);
}

.ho-h5 {
  font-size: var(--ho-text-h5);
  line-height: var(--ho-leading-tight);
}

.ho-h6 {
  font-size: var(--ho-text-h6);
  line-height: var(--ho-leading-tight);
}

.ho-body-lg {
  font-size: var(--ho-text-body-lg);
  line-height: 1.55;
  letter-spacing: 0.01em;
}

.ho-body {
  font-size: var(--ho-text-body);
  line-height: var(--ho-leading-body);
  letter-spacing: 0.01em;
}

.ho-body-sm {
  font-size: var(--ho-text-body-sm);
  line-height: 1.5;
}

.ho-meta,
.ho-overline,
.ho-kicker {
  font-size: var(--ho-text-meta);
  text-transform: uppercase;
}

.ho-meta {
  line-height: 1.4;
  letter-spacing: var(--ho-track-meta);
}

.ho-overline {
  letter-spacing: var(--ho-track-editorial);
  color: var(--ho-color-gold);
}

.ho-kicker {
  letter-spacing: 0.16em;
  color: var(--ho-color-gold);
}

.ho-editorial-quote {
  font-size: var(--ho-text-quote);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.ho-center {
  text-align: center;
}

.ho-text-left {
  text-align: left;
}

.ho-text-center {
  text-align: center;
}

.ho-text-right {
  text-align: right;
}

.ho-text-muted {
  color: rgba(17, 17, 17, 0.6);
}

.ho-text-slate {
  color: var(--ho-color-slate);
}

.ho-text-gold {
  color: var(--ho-color-gold);
}

.ho-text-ivory {
  color: var(--ho-color-ivory);
}

.ho-ratio-square {
  aspect-ratio: var(--ho-ratio-square);
}

.ho-ratio-portrait {
  aspect-ratio: var(--ho-ratio-portrait);
}

.ho-ratio-editorial {
  aspect-ratio: var(--ho-ratio-editorial);
}

.ho-ratio-landscape {
  aspect-ratio: var(--ho-ratio-landscape);
}

.ho-ratio-banner {
  aspect-ratio: var(--ho-ratio-banner);
}

.ho-media-cover,
.ho-media-cover img,
.ho-media-cover video,
.ho-media-cover picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ho-media-contain,
.ho-media-contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ho-surface-ivory {
  background: var(--ho-color-ivory);
}

.ho-surface-nero {
  background: var(--ho-color-nero);
  color: var(--ho-color-ivory);
}

.ho-surface-nero-soft {
  background: var(--ho-color-nero-soft);
  color: var(--ho-color-ivory);
}

.ho-border-top {
  border-top: 1px solid var(--ho-color-border);
}

.ho-border-bottom {
  border-bottom: 1px solid var(--ho-color-border);
}

.ho-border {
  border: 1px solid var(--ho-color-border);
}

.ho-radius-sm {
  border-radius: var(--ho-radius-sm);
}

.ho-radius-md {
  border-radius: var(--ho-radius-md);
}

.ho-radius-lg {
  border-radius: var(--ho-radius-lg);
}

.ho-shadow-soft {
  box-shadow: var(--ho-shadow-soft);
}

.ho-shadow-card {
  box-shadow: var(--ho-shadow-card);
}

.ho-divider {
  width: 100%;
  height: 1px;
  background: var(--ho-color-border);
}

.ho-divider-gold {
  width: 100%;
  height: 1px;
  background: rgba(193, 164, 109, 0.45);
}

.ho-items-center {
  align-items: center;
}

.ho-items-start {
  align-items: flex-start;
}

.ho-items-end {
  align-items: flex-end;
}

.ho-justify-center {
  justify-content: center;
}

.ho-justify-start {
  justify-content: flex-start;
}

.ho-justify-end {
  justify-content: flex-end;
}

.ho-justify-between {
  justify-content: space-between;
}

@media (max-width: 1024px) {
  :root {
    --ho-header-shell-pad: clamp(1rem, 3vw, 1.6rem);
  }

  .ho-grid-4,
  .ho-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ho-tablet-stack {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  :root {
    --ho-header-shell-pad: 1rem;
  }

  .ho-grid-4,
  .ho-grid-3,
  .ho-grid-2 {
    grid-template-columns: 1fr;
  }

  .ho-mobile-left {
    text-align: left;
  }

  .ho-mobile-stack {
    display: flex;
    flex-direction: column;
  }

  .ho-mobile-full {
    width: 100%;
  }

  .ho-mobile-hide {
    display: none !important;
  }
}