/*
 * Liore Lash design system (EU storefront).
 *
 * Source of truth: the approved Liore mockup, board 9 "de.liorelash.com"
 * (pink #FDC0CC, ink #1A1416, berry accent #C2306B; Playfair Display for
 * display type, Montserrat for text).
 */

:root {
  /* Core colours */
  --brand-bg: #ffffff;
  --brand-fg: #1A1416;
  --brand-fg-muted: #4A3D42;

  /* Signature pink and the berry accent used for badges and links */
  --brand-accent: #FDC0CC;
  --brand-accent-fg: #1A1416;
  --brand-pink-soft: #FFF1F4;
  --brand-berry: #C2306B;
  --brand-berry-dark: #8E1F4D;
  /* Rating stars: Amazon-like gold on a light grey row. */
  --brand-star: #FFA41C;
  --brand-star-empty: #E3DADD;

  /* Ink (buttons, dark hero) */
  --brand-dark: #1A1416;
  --brand-dark-fg: #ffffff;

  /* Success: in stock */
  --brand-success: #1F8A5B;
  --brand-success-fg: #ffffff;

  /* Typography: Montserrat for text, Playfair Display for headings */
  --brand-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --brand-font-weight: 400;
  --brand-font-weight-bold: 600;

  /* Layout */
  --brand-page-width: 78rem;
  --brand-page-width-wide: 90rem;
  --brand-surface: #ffffff;
  --brand-bg-soft: #FFF1F4;
  --brand-line: #F1D3DB;
  /* Muted text: 7.9:1 on white. */
  --brand-muted: #5C4D52;
  /* The pink is too light for text or icons, so the ink-side pair is berry. */
  --brand-accent-strong: #8E1F4D;
  --brand-gutter: 1.25rem;

  --brand-radius: 0.75rem;
  --brand-space: 1rem;
}

/*
 * Fonts are self-hosted: a German shop that pulls fonts from fonts.gstatic.com
 * hands every visitor's IP to a third country (LG München I, 2022).
 * Variable files cover the whole weight range, so no weight is synthesised.
 */
@font-face {
  font-family: "Montserrat";
  src: url("/brand/fonts/montserrat-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/brand/fonts/montserrat-variable-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/brand/fonts/playfair-display-variable.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/brand/fonts/playfair-display-variable-italic.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Display type for headings, as in the mockup. */
h1, h2, .display { font-family: var(--brand-font-display); font-weight: 500; }