/* Mayyera Creators design tokens.
   The source of truth is Elementor > Site Settings: each token reads the matching
   Global Color or Global Font, so a change made in the panel reaches this stylesheet.
   The literal values are fallbacks for pages rendered without the Elementor kit. */

:root {
  --c-noir: #0B0B0C;
  --c-anthracite: #1C1C1F;
  --c-graphite: #6F6E6A;
  --c-mist: #DCD8D0;
  --c-ivory: #F6F4EF;
  --c-champagne: #C2A878;

  /* Space. The column gap is not called --gap: Elementor sets a variable of that name on every element. */
  --gutter: clamp(1.25rem, 4.4vw, 4rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --section: clamp(6rem, 14vw, 12.5rem);
  --maxw: 1440px;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* One treatment for every photograph */
  --mx-photo-filter: grayscale(1) sepia(.14) contrast(1.05);
}

/* The kit prints its variables on body, so the bridge has to sit there too. */
body {
  /* Global Colors: Noir, Ivory, Graphite, Champagne use Elementor's four system slots. */
  --c-noir: var(--e-global-color-primary, #0B0B0C);
  --c-ivory: var(--e-global-color-secondary, #F6F4EF);
  --c-graphite: var(--e-global-color-text, #6F6E6A);
  --c-champagne: var(--e-global-color-accent, #C2A878);
  --c-anthracite: var(--e-global-color-anthracite, #1C1C1F);
  --c-mist: var(--e-global-color-mist, #DCD8D0);

  /* Global Fonts: Display, H2, Body, Label use the four system slots; Hero, H3, Lead are custom. */
  --f-display: var(--e-global-typography-primary-font-family, "Bodoni Moda"), "Didot", "Bodoni 72", Georgia, serif;
  --f-sans: var(--e-global-typography-text-font-family, "Jost"), "Futura", "Century Gothic", system-ui, sans-serif;

  --t-hero: var(--e-global-typography-hero-font-size, clamp(3rem, 8vw, 9.5rem));
  --t-display: var(--e-global-typography-primary-font-size, clamp(2.375rem, 6.2vw, 6.75rem));
  --t-h2: var(--e-global-typography-secondary-font-size, clamp(2.125rem, 4.6vw, 4.75rem));
  --t-h3: var(--e-global-typography-h3-font-size, clamp(1.5rem, 2.4vw, 2.5rem));
  --t-lead: var(--e-global-typography-lead-font-size, clamp(1.125rem, 1.45vw, 1.4375rem));
  --t-body: var(--e-global-typography-text-font-size, clamp(1rem, 1.05vw, 1.0625rem));
  --t-label: var(--e-global-typography-accent-font-size, .6875rem);
}