/* ============================================================
   225 Face Care — Foundations
   Colors + Type + Spacing + Motion tokens.
   Source of truth for the design system.
   ============================================================ */

/* ---------- Fonts ----------------------------------------- */

/* PP Editorial New — replaces Cormorant Garamond as the display serif.
   Three weights × roman/italic, mapped onto the 300 / 400 / 700 slots
   the rest of the system uses. */
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");
  font-weight: 200 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Italic.otf") format("opentype");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultrabold.otf") format("opentype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltraboldItalic.otf") format("opentype");
  font-weight: 600 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ----------------------------------------- */

:root {
  /* Primary palette */
  --color-brand-navy:        #2B3270;
  --color-deep-navy:         #1A2055;
  --color-soft-sand:         #F0EAE1; /* primary site bg + product photo bg */
  --color-warm-cream:        #F8F4ED; /* card / secondary bg */
  --color-pure-white:        #FFFFFF;
  --color-editorial-black:   #1C1C2E; /* Eridan-style uppercase H2 */

  /* Product accent colors */
  --accent-oleogel:          #6B4FA0; /* Deep Cleansing Oleogel — violet */
  --accent-fresh-gel:        #4A4FB0; /* Fresh Cleansing Gel — indigo */
  --accent-essence:          #2B3270; /* Hydra³ Essence — brand navy */
  --accent-lift:             #3D4890; /* Hydra³ Lift — deep lift navy */
  --accent-lift-em:          #5BA8D6; /* Hydra³ Lift EM — light blue */
  --accent-calm:             #E8A5A5; /* Hydra³ Calm+Lift — soft pink */
  --accent-pure:             #6FB4A8; /* Hydra³ Pure — mint */
  --accent-bright-code:      #E87642; /* Bright Code — bright orange */

  /* Text */
  --text-dark:               #1C1C2E;
  --text-medium:             #4A4A5A;
  --text-light:              #8A8A98;
  --text-on-dark:            #F0EAE1;

  /* UI */
  --border-light:            #E2E2EC;
  --border-soft:             #D6CFC4; /* on sand */
  --color-success:           #5BA887;
  --color-warning:           #E8A55B;
  --color-danger:            #C9534A;

  /* Type families */
  --font-display: "PP Editorial New", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "DM Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale */
  --fs-hero:        76px; /* H1 display */
  --fs-h2-bold:     48px; /* Eridan UPPERCASE section header */
  --fs-h2-refined:  52px; /* Light serif H2 alt */
  --fs-h3:          32px;
  --fs-h4:          22px;
  --fs-body-lg:     17px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-overline:    11px;
  --fs-caption:     12px;

  /* Line-heights */
  --lh-hero:    1.00;
  --lh-h2:      1.10;
  --lh-h3:      1.20;
  --lh-h4:      1.30;
  --lh-body:    1.75;
  --lh-body-lg: 1.85;
  --lh-tight:   1.40;

  /* Letter spacing */
  --ls-hero:        -0.02em;
  --ls-bold-h2:      0.04em;
  --ls-overline:     0.22em;
  --ls-button:       0.10em;
  --ls-nav:          0.06em;

  /* Spacing scale */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   32px;
  --sp-2xl:  48px;
  --sp-3xl:  64px;
  --sp-4xl:  96px;
  --sp-5xl:  128px;

  /* Layout */
  --content-max-width: 1280px;
  --gutter-desktop: 32px;
  --gutter-mobile:  24px;
  --container-pad-desktop: 64px;
  --container-pad-mobile:  24px;
  --section-py-desktop: 120px;
  --section-py-mobile:  64px;

  /* Radii — deliberately sharp / editorial */
  --radius-xs: 2px;   /* buttons */
  --radius-sm: 4px;   /* cards, inputs */
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--border-light);
  --border-on-sand:  1px solid var(--border-soft);

  /* Shadows — barely-there, editorial */
  --shadow-soft:   0 1px 2px rgba(28, 28, 46, 0.04), 0 2px 8px rgba(28, 28, 46, 0.04);
  --shadow-lift:   0 4px 12px rgba(28, 28, 46, 0.06), 0 12px 32px rgba(28, 28, 46, 0.06);
  --shadow-hero:   0 24px 64px rgba(28, 28, 46, 0.10);

  /* Motion */
  --ease-editorial: cubic-bezier(.19, 1, .22, 1);
  --dur-fast:   200ms;
  --dur-base:   400ms;
  --dur-slow:   600ms;
}

/* ---------- Base / semantic ------------------------------- */

html {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--color-soft-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  color: var(--color-brand-navy);
  margin: 0;
}

/* Eridan-style bold uppercase section header */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2-bold);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-bold-h2);
  text-transform: uppercase;
  color: var(--color-editorial-black);
  margin: 0;
}

/* Refined alt H2 — light serif, sentence case */
.h2-refined {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2-refined);
  line-height: var(--lh-h2);
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-brand-navy);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--color-brand-navy);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--color-brand-navy);
  margin: 0;
}

p { margin: 0; }

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 300; }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body);    font-weight: 300; }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-tight);   font-weight: 400; }

.overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-brand-navy);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--text-light);
}

/* Display italic — for nuance in a serif title (e.g. "Oni kažu, mi *vidimo*.") */
.italic-emphasis {
  font-style: italic;
  font-weight: 300;
}

/* ---------- Utilities ------------------------------------- */

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--container-pad-desktop);
  padding-right: var(--container-pad-desktop);
}
@media (max-width: 760px) {
  .container { padding-left: var(--container-pad-mobile); padding-right: var(--container-pad-mobile); }
}

.section { padding-top: var(--section-py-desktop); padding-bottom: var(--section-py-desktop); }
@media (max-width: 760px) { .section { padding-top: var(--section-py-mobile); padding-bottom: var(--section-py-mobile); } }

.bg-sand   { background: var(--color-soft-sand); }
.bg-cream  { background: var(--color-warm-cream); }
.bg-white  { background: var(--color-pure-white); }
.bg-navy   { background: var(--color-brand-navy); color: var(--text-on-dark); }
.bg-deep   { background: var(--color-deep-navy);  color: var(--text-on-dark); }