/* =========================================================================
   hona holiday — colors & type tokens
   ----------------------------------------------------------------------
   Apple-style minimalism, applied to a Korean premium pet-accessory brand.

   Composition rules:
   - WARMTH : PARTY = 9 : 1
     · 90 % of every page is warm-neutrals (cream, slate, soft gray).
     · 10 % is the Party pop — coral CTA, peach moments, the red bow.
   - Color appears in the LOGO, in PHOTOGRAPHY, and in the single primary
     action. Body chrome (nav, cards, borders) stays neutral.
   ========================================================================= */

:root {
  /* ---------- Point colors (the brand's two "voice" colors) ---------- */
  --coral:        #FF7E79;   /* rgb(255,126,121) — the Party color      */
  --coral-press:  #E66A66;   /* darker variant for active/press         */
  --slate:        #44546A;   /* rgb(68,84,106)   — the Warmth voice     */
  --slate-deep:   #2F3B4D;   /* keyboard focus, true text on cream      */

  /* ---------- Sub colors (4) ---------------------------------------- */
  --steel:        #7B8A9C;   /* rgb(123,138,156) — muted slate           */
  --peach:        #FFC6C5;   /* rgb(255,198,197) — soft warm pink        */
  --cream:        #F9F9ED;   /* rgb(249,249,237) — the page             */
  --gray-line:    #D8D8D8;   /* rgb(216,216,216) — hairline / divider   */

  /* ---------- Tone extensions (derived, used sparingly) ------------- */
  --cream-2:      #F2F2E5;   /* alt band; subtle section change         */
  --steel-08:     rgba(123,138,156,0.08);
  --slate-04:     rgba(68,84,106,0.04);
  --coral-12:     rgba(255,126,121,0.12);

  /* ---------- Semantic surface tokens ------------------------------- */
  --bg:           var(--cream);
  --bg-alt:       var(--cream-2);
  --bg-card:      #FFFFFF;          /* white only inside cards          */
  --bg-tile-dark: var(--slate);     /* dark-tile mode = slate           */
  --bg-tile-deep: var(--slate-deep);

  --fg:           var(--slate);     /* default body color on cream      */
  --fg-strong:    var(--slate-deep);
  --fg-muted:     var(--steel);
  --fg-subtle:    #9AA4B1;
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-mute: #C7CDD6;

  --line:         var(--gray-line);
  --line-soft:    #ECECEC;

  --action:       var(--coral);     /* the ONE interactive color        */
  --action-press: var(--coral-press);
  --action-on:    #FFFFFF;

  /* ---------- Type families ----------------------------------------- */
  /* Display: handwritten marker — the "party" voice. */
  --font-display-en: "Mansalva", "Felt Tip Woman", cursive;
  --font-display-ko: "Gaegu", "J개구쟁이", "Mansalva", cursive;

  /* UI workhorse */
  --font-sans:    "Noto Sans", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
                  "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (Apple-tight at the top) ------------------- */
  --fs-hero:      clamp(48px, 7vw, 96px);   /* hero-display              */
  --fs-display-lg: 40px;                     /* tile headlines           */
  --fs-display-md: 34px;                     /* section heads            */
  --fs-lead:      28px;                      /* tile subcopy             */
  --fs-lead-airy: 24px;                      /* airy 300-weight reads    */
  --fs-tagline:   21px;
  --fs-body:      17px;                      /* DEFAULT paragraph        */
  --fs-caption:   14px;
  --fs-fine:      12px;
  --fs-micro:     10px;

  --lh-tight:     1.07;
  --lh-snug:      1.2;
  --lh-body:      1.47;
  --lh-loose:     2.0;

  --tk-tight:     -0.022em;
  --tk-tighter:   -0.028em;
  --tk-normal:    0;
  --tk-wide:      0.011em;
  --tk-airy:      0.196px;

  /* ---------- Spacing — Apple base + room for warm pacing ----------- */
  --space-xxs:    4px;
  --space-xs:     8px;
  --space-sm:     12px;
  --space-md:     17px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 80px;
  --space-breath: 120px;             /* between major chapters          */

  /* ---------- Radii ------------------------------------------------- */
  --r-none:       0;
  --r-xs:         5px;
  --r-sm:         8px;
  --r-md:         11px;
  --r-lg:         18px;
  --r-pill:       9999px;

  /* ---------- Elevation — Apple's "exactly one shadow" rule --------- */
  --shadow-product: 0 3px 30px 5px rgba(31, 39, 53, 0.18);  /* product imagery only */
  --shadow-none:    none;
  --hairline:       inset 0 0 0 1px var(--line);

  /* ---------- Motion ------------------------------------------------ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;
  --dur-reveal:   800ms;

  /* ---------- Layout constants ------------------------------------- */
  --max-content:  1200px;
  --max-narrow:   980px;
  --pad-page:     clamp(24px, 5vw, 80px);
}

/* =========================================================================
   Base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--tk-tight);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type roles ------------------------------------------------ */

.hero-display, h1.hero {
  font-family: var(--font-display-en);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  font-weight: 400;
  color: var(--fg-strong);
  margin: 0;
}
.hero-display.ko, h1.hero.ko {
  font-family: var(--font-display-ko);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tk-tight);
  margin: 0;
  color: var(--fg-strong);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-display-md);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: var(--tk-tighter);
  margin: 0;
  color: var(--fg-strong);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-tagline);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: var(--tk-wide);
  margin: 0;
  color: var(--fg-strong);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--tk-tight);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.14;
  letter-spacing: 0.196px;
  font-weight: 400;
  color: var(--fg);
  max-width: 32ch;
}
.lead-airy {
  font-size: var(--fs-lead-airy);
  line-height: 1.5;
  font-weight: 300;
  color: var(--fg);
  max-width: 56ch;
}

p { margin: 0 0 1em; color: var(--fg); }
.muted     { color: var(--fg-muted); }
.subtle    { color: var(--fg-subtle); }
.on-dark   { color: var(--fg-on-dark); }
.on-dark.muted { color: var(--fg-on-dark-mute); }

.eyebrow {
  font-size: var(--fs-fine);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.signature {
  font-family: var(--font-display-en);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
}

.caption        { font-size: var(--fs-caption); line-height: 1.43; }
.caption-strong { font-size: var(--fs-caption); font-weight: 600; line-height: 1.29; }
.fine-print     { font-size: var(--fs-fine);    line-height: 1.0;  letter-spacing: -0.12px; }
.micro-legal    { font-size: var(--fs-micro);   line-height: 1.3; }

/* ---------- The single allowed action --------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--tk-tight);
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--action);
  color: var(--action-on);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.btn:hover   { background: var(--coral-press); }
.btn:active  { transform: scale(0.96); }
.btn:focus-visible {
  outline: 2px solid var(--slate-deep);
  outline-offset: 3px;
}

.btn--ghost {
  background: transparent;
  color: var(--action);
  box-shadow: inset 0 0 0 1.5px var(--action);
}
.btn--ghost:hover {
  background: var(--coral-12);
  color: var(--action-press);
}

.btn--dark {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 8px 15px;
  font-size: var(--fs-caption);
  font-weight: 400;
}
.btn--dark:hover { background: var(--slate-deep); }

.text-link {
  color: var(--action);
  text-decoration: none;
  font-weight: 500;
}
.text-link:hover { text-decoration: underline; }

/* ---------- Hairline ------------------------------------------------- */
hr.hairline {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-section) 0;
}