/* Global fonts, tokens, reset and shared base styles */
@font-face {
  font-family: "Luxerie";
  src: url("../fonts/Luxerie.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-Regular.woff2") format("woff2"),
       url("../fonts/Magreb-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-Italic.woff2") format("woff2"),
       url("../fonts/Magreb-Italic.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-Medium.woff2") format("woff2"),
       url("../fonts/Magreb-Medium.woff") format("woff");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-MediumItalic.woff2") format("woff2"),
       url("../fonts/Magreb-MediumItalic.woff") format("woff");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-SemiBold.woff2") format("woff2"),
       url("../fonts/Magreb-SemiBold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-SemiBoldItalic.woff2") format("woff2"),
       url("../fonts/Magreb-SemiBoldItalic.woff") format("woff");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-Bold.woff2") format("woff2"),
       url("../fonts/Magreb-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Magreb";
  src: url("../fonts/Magreb-BoldItalic.woff2") format("woff2"),
       url("../fonts/Magreb-BoldItalic.woff") format("woff");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root{
  --font-display: "Luxerie", serif;
  --font-editorial: "Magreb", serif;
  --font-ui: "Poppins", sans-serif;

  --color-bg-base: #FFF7ED;
  --color-bg-section-alt: #FFDAD4;
  --color-surface-rose: #FFCBC5;
  --color-surface-soft: #FFF3E6;
  --color-surface-white: #FFFFFF;
  --color-surface-featured: #2F141C;
  --color-surface-featured-alt: #43212B;
  --color-text-primary: #1B1B1B;
  --color-text-secondary: #9A7D5F;
  --color-text-secondary-on-rose: #7A5248;
  --color-text-on-rose-secondary: var(--color-text-secondary-on-rose);
  --color-text-on-rose-muted: rgba(122, 82, 72, 0.76);
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-soft: rgba(255, 243, 230, 0.84);
  --color-text-inverse-muted: rgba(255, 243, 230, 0.64);
  --color-cta: #F77F4B;
  --color-accent-soft: #FF9182;
  --color-border-soft: #E8C5AC;
  --color-border-featured: rgba(255, 145, 130, 0.22);

  --gradient-brand: linear-gradient(162.8deg, #FFDAD4 2.19%, #FFF3E6 51.07%, #FFDAD4 96.77%);
  --gradient-cta: linear-gradient(160deg, rgba(255, 145, 130, 0.98) 0%, rgba(247, 127, 75, 0.98) 100%);
  --gradient-featured-surface: linear-gradient(180deg, var(--color-surface-featured-alt) 0%, var(--color-surface-featured) 100%);

  --border-soft-16: rgba(232, 197, 172, 0.16);
  --border-soft-24: rgba(232, 197, 172, 0.24);
  --border-soft-36: rgba(232, 197, 172, 0.36);
  --border-soft-52: rgba(232, 197, 172, 0.52);
  --border-soft-72: rgba(232, 197, 172, 0.72);

  --surface-section-72: rgba(255, 218, 212, 0.72);
  --surface-rose-34: rgba(255, 203, 197, 0.34);
  --surface-rose-42: rgba(255, 203, 197, 0.42);
  --surface-rose-48: rgba(255, 203, 197, 0.48);
  --surface-rose-56: rgba(255, 203, 197, 0.56);
  --surface-rose-82: rgba(255, 203, 197, 0.82);
  --surface-white-20: rgba(255, 255, 255, 0.20);
  --surface-white-28: rgba(255, 255, 255, 0.28);
  --surface-white-42: rgba(255, 255, 255, 0.42);
  --surface-white-44: rgba(255, 255, 255, 0.44);
  --surface-white-55: rgba(255, 255, 255, 0.55);
  --surface-white-58: rgba(255, 255, 255, 0.58);

  --accent-soft-07: rgba(255, 145, 130, 0.07);
  --accent-soft-12: rgba(255, 145, 130, 0.12);
  --accent-soft-18: rgba(255, 145, 130, 0.18);
  --accent-soft-24: rgba(255, 145, 130, 0.24);
  --editorial-soft-06: rgba(154, 125, 95, 0.06);
  --editorial-soft-08: rgba(154, 125, 95, 0.08);
  --editorial-border-18: rgba(154, 125, 95, 0.18);
  --editorial-border-28: rgba(154, 125, 95, 0.28);
  --cta-soft-12: rgba(247, 127, 75, 0.12);
  --cta-soft-18: rgba(247, 127, 75, 0.18);
  --cta-shadow-28: 0 4px 18px rgba(247, 127, 75, 0.28);
  --cta-shadow-36: 0 8px 28px rgba(247, 127, 75, 0.36);
  --shadow-featured: 0 20px 48px rgba(47, 20, 28, 0.24);
  --shadow-featured-hover: 0 28px 60px rgba(47, 20, 28, 0.32);

  --shadow-soft: 0 8px 24px rgba(27, 27, 27, 0.04);
  --shadow-md: 0 12px 28px rgba(27, 27, 27, 0.06);
  --shadow-lg: 0 16px 34px rgba(27, 27, 27, 0.08);
  --shadow-xl: 0 22px 56px rgba(27, 27, 27, 0.11);

  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-section-sm: 52px;
  --space-section-md: 68px;
  --space-section-lg: 84px;
  --space-section-tight-sm: 28px;
  --space-card-sm: 20px;
  --space-card-md: 24px;
  --space-stack-xs: 8px;
  --space-stack-sm: 12px;
  --space-stack-md: 18px;
  --space-stack-lg: 24px;

  --type-hero: clamp(2.35rem, 10.4vw, 4.6rem);
  --type-section: clamp(1.95rem, 7.8vw, 3.25rem);
  --type-section-tight: clamp(1.85rem, 6.8vw, 2.9rem);
  --type-body-editorial: clamp(0.95rem, 3.8vw, 1rem);
  --type-body-ui: 0.94rem;

  --motion-duration-xs: 160ms;
  --motion-duration-sm: 220ms;
  --motion-duration-md: 360ms;
  --motion-duration-lg: 560ms;
  --motion-duration-xl: 720ms;
  --motion-delay-stagger: 60ms;
  --motion-distance-xs: 6px;
  --motion-distance-sm: 10px;
  --motion-distance-md: 14px;
  --motion-blur-sm: 2px;
  --motion-blur-md: 4px;
  --motion-ease-standard: cubic-bezier(0.22, 0.78, 0.2, 1);
  --motion-ease-soft: cubic-bezier(0.18, 0.88, 0.28, 1);
  --motion-ease-emphasis: cubic-bezier(0.18, 0.9, 0.24, 1);

  --ei-bg: var(--color-bg-base);
  --ei-panel: var(--color-bg-section-alt);
  --ei-text: var(--color-text-primary);
  --ei-muted: var(--color-text-secondary);
  --ei-accent: var(--color-cta);
  --ei-border: var(--border-soft-36);
  --ei-border-strong: var(--border-soft-52);
  --ei-divider: var(--color-surface-soft);
  --ei-shadow: var(--shadow-md);
  --ei-radius: 22px;
  --ei-radius-pill: var(--radius-pill);
}


*{
    box-sizing:border-box;
  }

  html,body{
    margin:0;
    padding:0;
    background:var(--ei-bg);
    color:var(--ei-text);
  }

body{
    font-family:var(--font-ui);
  }

  /* Scoped shell base: neutralize theme inheritance only inside our UI shell */
  .ei-site-shell{
    color:var(--ei-text);
    font-family:var(--font-ui);
    font-size:16px;
    line-height:1.5;
    letter-spacing:normal;
    text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
  }

  .ei-site-shell,
  .ei-site-shell *,
  .ei-site-shell *::before,
  .ei-site-shell *::after{
    box-sizing:border-box;
  }

  .ei-site-shell :where(h1, h2, h3, h4, h5, h6){
    margin:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    letter-spacing:normal;
    line-height:inherit;
    text-transform:none;
  }

  .ei-site-shell :where(p, figure, blockquote){
    margin:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    letter-spacing:normal;
    line-height:inherit;
    text-transform:none;
  }

  .ei-site-shell :where(ul, ol){
    margin:0;
    padding:0;
    list-style:none;
  }

  .ei-site-shell :where(li){
    margin:0;
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    letter-spacing:normal;
    line-height:inherit;
    text-transform:none;
  }

  .ei-site-shell :where(img, svg, video, canvas, iframe){
    display:block;
    max-width:100%;
    border:0;
  }

  .ei-site-shell :where(img, video, canvas){
    height:auto;
  }

  .ei-site-shell :where(a){
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    letter-spacing:normal;
    line-height:inherit;
    text-decoration:none;
    text-transform:none;
    background-color:transparent;
  }

  .ei-site-shell :where(a:hover, a:visited, a:active, a:focus, a:focus-visible){
    color:inherit;
    text-decoration:none;
    box-shadow:none;
  }

  .ei-site-shell :where(button, input, textarea, select, summary, label){
    color:inherit;
    font-family:inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
    letter-spacing:normal;
    line-height:inherit;
    text-transform:none;
  }

  .ei-site-shell :where(button, input[type="button"], input[type="submit"], input[type="reset"]){
    appearance:none;
    -webkit-appearance:none;
    margin:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    text-transform:none;
  }

  .ei-site-shell :where(
    button:hover,
    button:focus,
    button:focus-visible,
    input[type="button"]:hover,
    input[type="button"]:focus,
    input[type="button"]:focus-visible,
    input[type="submit"]:hover,
    input[type="submit"]:focus,
    input[type="submit"]:focus-visible,
    input[type="reset"]:hover,
    input[type="reset"]:focus,
    input[type="reset"]:focus-visible
  ){
    color:inherit;
    text-decoration:none;
    box-shadow:none;
  }

  .ei-site-shell :where(input, textarea, select){
    max-width:100%;
  }

  .ei-site-shell :where(textarea){
    resize:vertical;
  }

  .ei-site-shell :where(fieldset){
    min-width:0;
    margin:0;
    padding:0;
    border:0;
  }

  .ei-site-shell :where(legend){
    margin:0;
    padding:0;
    color:inherit;
    letter-spacing:normal;
    text-transform:none;
  }

  .ei-site-shell :where(a, button, input, textarea, select, summary){
    -webkit-tap-highlight-color:transparent;
  }

  .ei-site-shell :where(a, button, input, textarea, select, summary):focus-visible{
    outline:2px solid currentColor;
    outline-offset:3px;
  }

  .ei-sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }