/* ============================================================
   mijnskincare — Colors & Type
   Korean skincare webshop · Brand foundations
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* ─── CORE SAGE PALETTE ─────────────────────────────── */
  --sage-dark:    #2D4A2D;  /* Salie Donker — primary brand */
  --sage-mid:     #4A6741;  /* Salie Midden — secondary */
  --sage-light:   #8FAB85;  /* Salie Licht — accents, ornaments */
  --sage-faint:   #C5D4BF;  /* Salie Vaag — soft backgrounds */
  --sage-bg:      #E8EDE6;  /* Salie Achtergrond — primary bg */
  --off-white:    #F5F7F3;  /* Gebroken Wit — ivory */
  --page-bg:      #C8D0C6;  /* Environmental page wash */

  /* ─── NEUTRALS ──────────────────────────────────────── */
  --ink:          #1A1A1A;  /* Pure dark for imagery/black tiles */
  --white:        #FFFFFF;

  /* ─── SEMANTIC FG / BG ──────────────────────────────── */
  --fg-1:         var(--sage-dark);        /* Headlines */
  --fg-2:         var(--sage-mid);         /* Body text */
  --fg-3:         var(--sage-light);       /* Meta, captions */
  --fg-muted:     rgba(74,103,65,0.55);    /* Hints, placeholders */
  --fg-on-dark:   var(--off-white);
  --fg-on-dark-2: var(--sage-faint);
  --fg-on-dark-3: rgba(197,212,191,0.55);

  --bg-primary:   var(--sage-bg);
  --bg-surface:   var(--off-white);
  --bg-deep:      var(--sage-dark);
  --bg-accent:    var(--sage-faint);

  /* ─── LINES & ORNAMENT ──────────────────────────────── */
  --hairline:     rgba(74,103,65,0.25);
  --hairline-on-dark: rgba(197,212,191,0.22);
  --divider:      linear-gradient(to right, transparent, var(--sage-light), transparent);
  --divider-dark: linear-gradient(to right, transparent, rgba(197,212,191,0.25), transparent);

  /* ─── TYPE FAMILIES ─────────────────────────────────── */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:    'DM Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── TYPE SCALE ────────────────────────────────────── */
  /* Display — Cormorant italic, tracked tight */
  --t-display-xl: 300 italic 72px/1   var(--font-serif);
  --t-display-lg: 300 italic 56px/1   var(--font-serif);
  --t-display-md: 400 italic 42px/1.05 var(--font-serif);
  --t-display-sm: 400 italic 32px/1.1  var(--font-serif);

  /* Headings */
  --t-h1: 300 italic 42px/1.1  var(--font-serif);
  --t-h2: 400 italic 32px/1.15 var(--font-serif);
  --t-h3: 500 22px/1.25 var(--font-serif);
  --t-h4: 500 16px/1.3 var(--font-sans);

  /* Body */
  --t-body-lg: 300 17px/1.7 var(--font-sans);
  --t-body:    400 14px/1.65 var(--font-sans);
  --t-body-sm: 400 13px/1.6 var(--font-sans);

  /* Eyebrow / micro — the signature tracked uppercase label */
  --t-eyebrow:   500 11px/1.2 var(--font-sans);
  --t-eyebrow-sm: 500 9px/1.2 var(--font-sans);
  --t-eyebrow-xs: 500 7.5px/1.2 var(--font-sans);

  /* UI */
  --t-label:  500 12px/1.3 var(--font-sans);
  --t-button: 500 13px/1 var(--font-sans);
  --t-caption: 400 11px/1.4 var(--font-sans);

  /* Signature letter-spacing tokens */
  --ls-eyebrow:    0.35em;   /* K · Beauty */
  --ls-eyebrow-sm: 0.25em;
  --ls-wide:       0.2em;
  --ls-label:      0.08em;
  --ls-display:    -0.01em;
  --ls-display-tight: -0.02em;

  /* ─── SPACING ───────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  52px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 104px;

  /* ─── RADII ─────────────────────────────────────────── */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;   /* Business card, subtle surfaces */
  --r-lg:   10px;
  --r-pill: 999px;

  /* ─── SHADOWS & ELEVATION ───────────────────────────── */
  /* Brand uses almost no shadows — elevation is via tone, gradients & brackets */
  --sh-xs: 0 1px 2px rgba(45,74,45,0.04);
  --sh-sm: 0 2px 8px rgba(45,74,45,0.06);
  --sh-md: 0 8px 24px rgba(45,74,45,0.08);
  --sh-lg: 0 24px 56px rgba(45,74,45,0.12);

  /* Signature "atmospheric" surface glow — used on cards & posts */
  --glow-light: radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.42) 0%, transparent 50%),
                radial-gradient(ellipse at 10% 88%, rgba(45,74,45,0.05) 0%, transparent 45%);
  --glow-dark:  radial-gradient(ellipse at 75% 25%, rgba(143,171,133,0.14) 0%, transparent 55%),
                radial-gradient(ellipse at 18% 80%, rgba(143,171,133,0.07) 0%, transparent 50%);

  /* ─── MOTION ────────────────────────────────────────── */
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   SEMANTIC BASE STYLES
   ============================================================ */

html { color: var(--fg-1); background: var(--bg-primary); }
body { font: var(--t-body); color: var(--fg-2); -webkit-font-smoothing: antialiased; }

h1 { font: var(--t-h1); color: var(--fg-1); letter-spacing: var(--ls-display-tight); }
h2 { font: var(--t-h2); color: var(--fg-1); letter-spacing: var(--ls-display); }
h3 { font: var(--t-h3); color: var(--fg-1); }
h4 { font: var(--t-h4); color: var(--fg-1); letter-spacing: var(--ls-label); }

p { font: var(--t-body); color: var(--fg-2); text-wrap: pretty; }

/* Eyebrow utility — the signature tracked uppercase label.
   Use above titles, next to lines, in footers. */
.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow--sm { font: var(--t-eyebrow-sm); letter-spacing: var(--ls-eyebrow-sm); }
.eyebrow--xs { font: var(--t-eyebrow-xs); letter-spacing: var(--ls-eyebrow-sm); }

/* The logo lockup — italic serif + superscript TLD */
.logo-lockup {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--fg-1);
  letter-spacing: var(--ls-display);
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
}
.logo-lockup sup {
  font-style: italic;
  vertical-align: super;
  color: var(--sage-light);
  margin-left: 3px;
  font-size: 0.38em;
  line-height: 0;
}

/* Divider flanked with label — "— K · Beauty —" pattern */
.rule-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--t-eyebrow-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.rule-label::before,
.rule-label::after {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* Korean motif — 피부 ("skin") set in italic serif, widely tracked */
.korean-motif {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sage-light);
  letter-spacing: 0.32em;
}

/* Buttons */
.btn {
  font: var(--t-button);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--sage-dark);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--sage-dark); color: var(--off-white); }
.btn--solid { background: var(--sage-dark); color: var(--off-white); }
.btn--solid:hover { background: var(--sage-mid); }
.btn--ghost { border-color: var(--hairline); color: var(--sage-mid); }