/* ==========================================================================
   ARALIYA Design Tokens (shared)
   Purpose: One consistent token layer for Elementor + all pages (Light/Dark overrides live in theme files)
   Version: 1.3.0
   ========================================================================== */

/* --- Typography ----------------------------------------------------------- */
:root{
  /* Font family (loaded via wp_enqueue_style in plugin) */
  --font-main: "Cormorant", serif;

  /* Font weights (requested) */
  --fw-text: 400;
  --fw-accent: 500;
  --fw-headline: 600;
  --fw-subhead: 400;

  /* Common font sizes (optional helpers) */
  --fs-base: 16px;
  --lh-base: 1.55;
}

/* Base application */
html, body{
  font-family: var(--font-main);
  font-weight: var(--fw-text);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headlines */
h1, h2,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title{
  font-family: var(--font-main);
  font-weight: var(--fw-headline);
}

/* Subheads */
h3,
.elementor-widget-heading h3.elementor-heading-title{
  font-family: var(--font-main);
  font-weight: var(--fw-subhead);
}

/* Body text */
p, li, a, input, textarea, select, button, label, small, em, strong{
  font-family: var(--font-main);
}

/* Accent (eyebrow, quotes, brand microcopy) */
.eyebrow,
.hero-quote,
blockquote,
.site-header .logo,
.elementor-widget-text-editor blockquote{
  font-family: var(--font-main);
  font-weight: var(--fw-accent);
}

/* Make sure strong stays readable with this family */
strong{ font-weight: var(--fw-headline); }

/* --- Theme selection marker ----------------------------------------------
   We keep this attribute so Elementor/other scripts can read it.
   Actual colors live in the Light/Dark theme CSS files.
--------------------------------------------------------------------------- */
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{ color-scheme: dark; }


/* --- Elementor global typography bridge ----------------------------------
   Elementor widgets often use these CSS variables. Setting them ensures
   Elementor-controlled typography also follows our font system.
--------------------------------------------------------------------------- */
:root{
  --e-global-typography-primary-font-family: var(--font-main);
  --e-global-typography-secondary-font-family: var(--font-main);
  --e-global-typography-text-font-family: var(--font-main);
  --e-global-typography-accent-font-family: var(--font-main);

  --e-global-typography-primary-font-weight: var(--fw-headline);
  --e-global-typography-secondary-font-weight: var(--fw-subhead);
  --e-global-typography-text-font-weight: var(--fw-text);
  --e-global-typography-accent-font-weight: var(--fw-accent);
}

/* Force inheritance for Elementor wrappers (Elementor may set its own font-family) */
.elementor, .elementor-widget, .elementor-widget-container{
  font-family: var(--font-main) !important;
}
.elementor .elementor-heading-title{
  font-family: var(--font-main) !important;
}