/* ============================================================
   SAGUO — Colors & Type
   The full design token sheet. Import this in any artifact.
   ============================================================ */

/* ── FONTS ──────────────────────────────────────────── */
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('fonts/Pretendard-Black.ttf') format('truetype');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* ── COLOR — Black & White only ───────────────────── */
  --bg:           #F2F2F2;   /* page background — soft off-white */
  --bg-alt:       #E8E8E8;   /* footer / secondary surfaces */
  --card:         #FFFFFF;   /* card / pillar surface */
  --ink:          #000000;   /* primary text + lines */
  --ink-soft:     #1A1A1A;   /* near-black body text */
  --muted:        #9A9A9A;   /* secondary / placeholder text */
  --muted-strong: #555555;   /* sub-headline gray */
  --line:         #E5E5E5;   /* hairline divider */
  --line-strong:  #000000;   /* strong border (THE motif) */
  --line-soft:    rgba(0,0,0,0.12);

  /* Semantic — kept neutral */
  --fg1: var(--ink);
  --fg2: var(--ink-soft);
  --fg3: var(--muted-strong);
  --fg4: var(--muted);

  /* State (rarely used — Saguo is monochrome) */
  --error:   #D32F2F;
  --success: #2E7D32;
  --warning: #E67E22;
  --info:    #2980B9;

  /* ── TYPE STACKS ──────────────────────────────────── */
  --display:        'Pretendard', Helvetica, Arial, sans-serif;
  --sans:           'Pretendard', Helvetica, Arial, sans-serif;
  --serif:          'Pretendard', -apple-system, sans-serif;

  /* Type scale */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  22px;
  --fs-3xl:  28px;
  --fs-4xl:  44px;
  --fs-5xl:  64px;
  --fs-mega: clamp(96px, 13vw, 200px);   /* hero numbers */

  /* Letter spacing — SAGUO runs tight across the board.
     EN display sits just below 0; EN body slightly negative; KO single-step tighter than default. */
  --ls-display:  -0.03em;
  --ls-sans:     -0.03em;
  --ls-tight:    -0.05em;
  --ls-ko:       -0.06em;
  --ls-ko-tight: -0.07em;
  --ls-ko-mega:  -0.08em;
  --ls-eyebrow:   0.04em;     /* tracked all-caps labels — tightened */
  --ls-button:    0.04em;

  /* Line heights */
  --lh-tight:  0.9;
  --lh-snug:   1.1;
  --lh-base:   1.6;
  --lh-loose:  1.95;

  /* ── SPACING (80% scale) ──────────────────────────── */
  --space-xs:  3px;
  --space-sm:  6px;
  --space-md:  13px;
  --space-lg:  19px;
  --space-xl:  26px;
  --space-2xl: 38px;
  --space-3xl: 51px;
  --space-4xl: 77px;

  /* ── LAYOUT ───────────────────────────────────────── */
  --max-width: 1280px;
  --container-narrow: 960px;

  /* ── EFFECTS ──────────────────────────────────────── */
  /* Saguo barely uses shadow — flat, with hairlines. */
  --shadow-card:    0 6px 24px rgba(0,0,0,0.09);
  --shadow-overlay: 0 8px 24px rgba(0,0,0,0.18);

  /* Border radius — almost zero. Only dots are circles. */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-full: 50%;

  /* Motion */
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --ease-back:  cubic-bezier(.5,.15,.2,1);
  --t-fast:     .2s;
  --t-base:     .25s;
  --t-slow:     .42s;
  --t-cinema:   1.1s;
}

/* ── SEMANTIC ELEMENTS ────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: var(--ls-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
h1 { font-size: clamp(48px, 8vw, 80px); line-height: var(--lh-tight); }
h2 { font-size: clamp(28px, 4vw, 56px); }
h3 { font-size: clamp(22px, 3vw, 36px); font-weight: 700; }
h4 { font-size: var(--fs-xl); font-weight: 700; }

p { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--fg2); }

/* The mega numerals — used for SHOP, MYPAGE, CART titles. */
.t-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

/* The display label (uppercase, tracked) — buttons, ribbons, eyebrows */
.t-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Body sans — English body */
.t-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-sans);
  color: var(--fg2);
}

/* Korean body — keep Pretendard tight */
.t-body-ko {
  font-family: 'Pretendard', var(--sans);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-ko);
  color: var(--fg2);
}

/* Eyebrow / ribbon — tiny tracked all-caps */
.t-eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg1);
}

/* The dot — Saguo's heart motif */
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--ink);
  border-radius: var(--radius-full);
  vertical-align: baseline;
}
.dot-sm { width: 8px; height: 8px; }
.dot-lg { width: 18px; height: 18px; }