/* ============================================================
   Pure Sleep — Colors & Type
   ------------------------------------------------------------
   The brand lives in a pre-dawn sky: midnight navy backgrounds,
   a gradient that fades into mist, a Didone-style italic serif
   for accent moments, and a clean Korean sans for the body.
   ============================================================ */

/* ---------- Web fonts ---------------------------------------- */
/* Pretendard (Korean + Latin sans-serif). Closest free match to
   the rounded geometric sans used in the packaging / detail page
   headlines (예: "퓨어슬립 수면앰플"). */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* Playfair Display (substitute for the logo's italic serif).
   The Pure Sleep wordmark italic has sharp, high-contrast Didone
   strokes — Playfair Italic is the closest free match. Reserved
   for accent text and the wordmark fallback. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");

/* ---------- Color tokens ------------------------------------- */
/* Sampled from the package gradient (midnight → pre-dawn) and
   the detail page (cream paper for the light surfaces). */
:root {
  /* Night sky — the brand's default surface */
  --ps-ink:           #060B1C; /* deepest, used behind starfields */
  --ps-midnight:      #0A1124; /* default dark surface */
  --ps-night:         #0F1A33; /* dark elevated surface */
  --ps-twilight:      #1B2A47; /* card / divider on dark */
  --ps-dusk:          #2B4569; /* mid-tone, package gradient mid */
  --ps-dawn:          #4E6A92; /* tertiary text on dark */
  --ps-pre-dawn:      #8FA6C7; /* secondary text on dark */
  --ps-mist:          #C5D2E3; /* faint text, hairlines on dark */
  --ps-moonlight:     #E7ECF4; /* near-white-blue */
  --ps-white:         #FFFFFF;

  /* Paper — the brand's default light surface */
  --ps-bone:          #F4EFE6; /* warm cream, detail-page bg */
  --ps-paper:         #FAF7F1; /* lighter cream */
  --ps-stone:         #E8E3D8; /* hairlines on light */
  --ps-clay:          #C9C2B3; /* tertiary text on light */
  --ps-graphite:      #4A4A4A; /* secondary text on light */
  --ps-ink-text:      #1A1A1A; /* primary text on light */

  /* Accent — used sparingly, always for the ingredient story */
  --ps-lime:          #C8D86A; /* lime pulp green */
  --ps-lime-deep:     #6E8439; /* deeper lime, on light bg */
  --ps-amber:         #C9A36B; /* warm hint for chamomile / tea */
  --ps-amber-deep:    #8A6A3D;

  /* Semantic surface tokens (dark-by-default; flip on .ps-light) */
  --bg-1:             var(--ps-midnight); /* page */
  --bg-2:             var(--ps-night);    /* card / panel */
  --bg-3:             var(--ps-twilight); /* nested card */
  --fg-1:             var(--ps-white);    /* primary text */
  --fg-2:             var(--ps-pre-dawn); /* secondary */
  --fg-3:             var(--ps-dawn);     /* tertiary / meta */
  --hairline:         rgba(255,255,255,0.08);
  --accent:           var(--ps-moonlight);

  /* Border radii — soft, never pill-rounded except chips */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows — soft, mostly used on light surfaces */
  --shadow-1: 0 1px 2px rgba(10,17,36,0.06), 0 1px 1px rgba(10,17,36,0.04);
  --shadow-2: 0 6px 18px rgba(10,17,36,0.10), 0 2px 4px rgba(10,17,36,0.06);
  --shadow-3: 0 18px 48px rgba(10,17,36,0.18), 0 4px 12px rgba(10,17,36,0.10);
  --glow:     0 0 60px rgba(143,166,199,0.25); /* faint star/moon glow */

  /* Signature gradient — the package itself */
  --gradient-package: linear-gradient(180deg, #6f89b5 0%, #2b4569 38%, #14223e 72%, #060b1c 100%);
  --gradient-dawn:    linear-gradient(180deg, #c5d2e3 0%, #8fa6c7 40%, #4e6a92 100%);
  --gradient-night:   linear-gradient(180deg, #0F1A33 0%, #060B1C 100%);

  /* Type families */
  --font-sans:  "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
                "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;

  /* Type scale (clamped for fluid headings on web) */
  --t-display: 72px;
  --t-h1:      48px;
  --t-h2:      36px;
  --t-h3:      28px;
  --t-h4:      22px;
  --t-body-lg: 18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-caption: 12px;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-eyebrow: 0.18em; /* the small italic eyebrows like "Why Pure Sleep" */
}

/* Light surface variant (cream paper) — used by the detail page,
   app onboarding cards, and any element that should read "day". */
.ps-light {
  --bg-1: var(--ps-bone);
  --bg-2: var(--ps-paper);
  --bg-3: var(--ps-white);
  --fg-1: var(--ps-ink-text);
  --fg-2: var(--ps-graphite);
  --fg-3: var(--ps-clay);
  --hairline: rgba(26,26,26,0.10);
  --accent: var(--ps-dusk);
}

/* ---------- Base elements ------------------------------------ */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The package wordmark — italic serif, very tight */
.ps-wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The italic-serif "eyebrow" used everywhere on detail pages.
   Always small, always centered, always with extra letter spacing. */
.ps-eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

/* Headings — Korean sans, semibold, tight */
h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: pretty;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: pretty;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p { color: var(--fg-1); font-size: var(--t-body); line-height: var(--lh-loose); }
.p-lg { font-size: var(--t-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.p-sm { font-size: var(--t-small); color: var(--fg-2); }
.caption { font-size: var(--t-caption); letter-spacing: var(--ls-wide); color: var(--fg-3); text-transform: uppercase; }
.meta    { font-size: var(--t-caption); color: var(--fg-3); }

/* Display heading — used for hero numbers and feature callouts */
.display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
}

/* Accent-numeric (the big "29%" / "32%" badges on the pricing) */
.numeric {
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Asterisk footnotes — small, italic, dim — used throughout
   the detail page ("*2026년 3월 기준") */
.footnote {
  font-size: 11px;
  color: var(--fg-3);
}