/* Seoul Ventures Design System — Core Tokens
 * Extracted verbatim from SV.pen source file.
 * Variable names match the Penpot source ($color-bg, $color-accent, etc).
 */

/* ─────────── Fonts ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* === Colors (verbatim from Penpot variables) === */
  --color-bg:             #FAF9F7;   /* warm off-white page background */
  --color-surface:        #E7E5E4;   /* light stone — cards, chips on bg */
  --color-muted:          #D6D3D1;   /* stone-300 — muted surface */
  --color-border:         #D6D3D1;   /* same as muted — default borders */

  --color-dark:           #2D2D2D;   /* near-black — primary surface-on-dark */
  --color-dark-muted:     #44403C;   /* stone-700 — dark dividers */

  --color-text-primary:   #2D2D2D;   /* body text */
  --color-text-secondary: #78716C;   /* stone-500 — secondary copy */
  --color-text-tertiary:  #A8A29E;   /* stone-400 — tertiary / on-dark muted */
  --color-text-on-dark:   #FAF9F7;   /* text on dark surfaces */

  --color-accent:         #C2410C;   /* burnt-orange brand accent (orange-700) */
  --color-accent-soft:    #FED7AA;   /* orange-200 — soft accent bg */

  /* convenience aliases */
  --fg-1: var(--color-text-primary);
  --fg-2: var(--color-text-secondary);
  --fg-3: var(--color-text-tertiary);
  --bg:   var(--color-bg);
  --bg-2: var(--color-surface);
  --accent: var(--color-accent);

  /* === Fonts === */
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* === Type scale (from SV.pen observed sizes) ===
   * Manrope drives display (ExtraBold 800 on big heads). Inter drives body.
   * All line-heights designed for Korean + Latin mix. */
  --text-hero:       68px;   /* landing hero  (Manrope 800) */
  --text-display-xl: 56px;   /* sv home hero, final CTA */
  --text-display-l:  52px;   /* section heads */
  --text-display-m:  44px;   /* secondary display */
  --text-display-s:  30px;   /* pricing plan name */
  --text-title-xl:   28px;
  --text-title-l:    26px;   /* before/after heads */
  --text-title-m:    24px;   /* step titles, logo wordmark */
  --text-title-s:    22px;   /* use-case questions, stat nums */
  --text-lead:       20px;   /* step numbers */
  --text-body-xl:    19px;
  --text-body-l:     17px;
  --text-body-m:     15px;
  --text-body-s:     14px;
  --text-ui:         13px;
  --text-caption:    12px;
  --text-micro:      11px;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* === Spacing (4px baseline) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === Shadows === */
  --shadow-card:   0 4px 4px rgba(0,0,0,0.08);          /* Penpot default effect */
  --shadow-frame:  0 4px 4px rgba(0,0,0,0.25);          /* landing page outer */
  --shadow-lift:   0 8px 24px rgba(45,45,45,0.08);
  --shadow-pop:    0 16px 40px rgba(45,45,45,0.14);

  /* === Borders === */
  --border-hairline: 1px solid var(--color-border);
  --border-dark:     1px solid var(--color-dark);

  /* === Layout === */
  --page-max:  1240px;
  --page-pad:  80px;
}

/* ─────────── Base Element Styles ─────────── */
html, body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Display heads — Manrope ExtraBold, tight tracking on Korean */
.sv-display,
h1.sv, h2.sv, h3.sv {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: pretty;
}

h1.sv { font-size: var(--text-hero); }
h2.sv { font-size: var(--text-display-l); }
h3.sv { font-size: var(--text-title-m); }

/* Eyebrows — small Manrope bold label above a section head */
.sv-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  letter-spacing: 0.06em;
  text-transform: none; /* source mixes Korean/English; leave case alone */
  color: var(--color-text-secondary);
}

/* Body copy — Inter */
.sv-body {
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  line-height: 1.7;
  color: var(--color-text-primary);
}

.sv-body-s {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Numbers & statistics use Manrope */
.sv-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─────────── Component primitives ─────────── */

/* Buttons */
.btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-body-l);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  border-color: var(--color-dark);
}
.btn-primary:hover { background: #000; }

.btn-accent {
  background: var(--color-accent);
  color: #fff;
}
.btn-accent:hover { filter: brightness(.94); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-surface); }

.btn-on-dark {
  background: var(--color-bg);
  color: var(--color-dark);
}
.btn-on-dark:hover { background: #fff; }

/* Chips / eyebrow pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-ui);
  color: var(--color-text-primary);
}

.chip-accent {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Card shell */
.sv-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.sv-card--dark {
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  border-color: var(--color-dark);
}