/*
 * tokens.marketing.css
 *
 * Upstage Marketing context tokens.
 * Source: DESIGN_v2.md §3-M (Marketing Semantic), §3-M Marketing Component Tokens.
 * Target: Flyer (A4), brochure, sales kit, slides, social asset, campaign landing.
 *
 * 본 파일은 Product `tokens.product.css`와 완전히 분리된다.
 * Product UI (globals.css)는 이 파일을 import하지 않는다.
 * 6월 Task 2에서 @upstageai/design-tokens로 승격된다.
 *
 * 다크 모드 marketing 컴포넌트 토큰은 follow-up (M-3) — 현재 light only.
 */

:root {
  /* ========== MARKETING BRAND COLORS ========== */
  /* --ups-purple: visual anchor, decorative, eyebrow. 절대 버튼 배경 금지. */
  --ups-purple: #805cfb;
  /* --key-palette: CTA button. --color-brand-500 alias로 통합 (A1). */
  --key-palette: #5b52ff;
  /* --key-palette-hover: --key-palette × ~85% lightness. mkt-btn / web-nav__cta hover 공용. */
  --key-palette-hover: #4840e0;
  /* --highlight: punctuation. dark bg + ≤10% surface, 1~2개 요소만. */
  --highlight: #d2ff95;

  /* ========== MARKETING INK / NEUTRALS ========== */
  --ink: #0d0d12;
  --ink-80: rgba(13, 13, 18, 0.8);
  --ink-50: rgba(13, 13, 18, 0.5);
  --ink-20: rgba(13, 13, 18, 0.15);
  --ink-08: rgba(13, 13, 18, 0.06);

  /* ========== MARKETING SURFACES ========== */
  --surface-light: #fafbfc;
  --surface-purple: #f4f2ff;
  --hero-bg: #eae6ff;
  --dark-surface: #0d0d12;
  --dark-surface-alt: #12102a;
  /* Website main nav (upstage.ai 실측) */
  --web-nav-background: #151727;
  --web-nav-fg: #ffffff;
  --web-nav-fg-hover: rgba(255, 255, 255, 0.7);

  /* ========== MARKETING COMPONENT TOKENS — CARD ========== */
  --marketing-card-bg: #ffffff;
  --marketing-card-border: var(--ink-20);
  --marketing-card-radius: 12px;
  --marketing-card-padding: 24px;
  --marketing-card-padding-compact: 16px;
  --marketing-card-featured-border: var(--ups-purple);
  --marketing-card-featured-bar: var(--ups-purple);

  /* ========== MARKETING COMPONENT TOKENS — BUTTON ========== */
  --marketing-btn-bg: var(--key-palette);
  --marketing-btn-bg-hover: var(--key-palette-hover);
  --marketing-btn-fg: #ffffff;
  --marketing-btn-radius: 12px;
  --marketing-btn-ghost-fg: var(--key-palette);
  --marketing-btn-ghost-border: var(--key-palette);
  --marketing-btn-ghost-bg-hover: rgba(91, 82, 255, 0.06);

  /* ========== MARKETING COMPONENT TOKENS — INPUT (UNDERLINE) ========== */
  --marketing-input-border: rgba(13, 13, 18, 0.25);
  --marketing-input-border-active: var(--key-palette);
  --marketing-input-fg: var(--ink);
  --marketing-input-placeholder: rgba(13, 13, 18, 0.4);

  /* ========== MARKETING RADIUS SCALE ========== */
  --marketing-radius-tag: 4px;
  --marketing-radius-icon: 8px;
  --marketing-radius-card-compact: 10px;
  --marketing-radius-card: 12px;
  --marketing-radius-hero: 16px;

  /* ========== MARKETING TYPE SCALE (BODY=13PX BASELINE) ========== */
  --marketing-font-hero-min: 44px;
  --marketing-font-hero-max: 86px;
  --marketing-font-section-min: 24px;
  --marketing-font-section-max: 32px;
  --marketing-font-card-min: 13px;
  --marketing-font-card-max: 20px;
  --marketing-font-body-min: 12px;
  --marketing-font-body-max: 13px;
  --marketing-font-caption-min: 9px;
  --marketing-font-caption-max: 11px;
  --marketing-font-eyebrow-min: 8px;
  --marketing-font-eyebrow-max: 9px;
  --marketing-font-kpi-min: 32px;
  --marketing-font-kpi-max: 48px;
}

/*
 * Component example — for reference only.
 * 실제 컴포넌트는 위 토큰을 var()로 참조해야 한다. hex 하드코드 금지.
 */
.mkt-card {
  background: var(--marketing-card-bg);
  border: 1px solid var(--marketing-card-border);
  border-radius: var(--marketing-card-radius);
  padding: var(--marketing-card-padding);
}
.mkt-card[data-padding="compact"] {
  padding: var(--marketing-card-padding-compact);
}
.mkt-card[data-variant="featured"] {
  border-color: var(--marketing-card-featured-border);
  border-width: 1.5px;
}

.mkt-btn {
  background: var(--marketing-btn-bg);
  color: var(--marketing-btn-fg);
  border-radius: var(--marketing-btn-radius);
}
.mkt-btn:hover {
  background: var(--marketing-btn-bg-hover);
}
.mkt-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--marketing-btn-ghost-fg);
  border: 1px solid var(--marketing-btn-ghost-border);
}
.mkt-btn[data-variant="ghost"]:hover {
  background: var(--marketing-btn-ghost-bg-hover);
}

.input-underline {
  border: 0;
  border-bottom: 1px solid var(--marketing-input-border);
  color: var(--marketing-input-fg);
  background: transparent;
}
.input-underline::placeholder {
  color: var(--marketing-input-placeholder);
}
.input-underline:focus {
  border-bottom-color: var(--marketing-input-border-active);
  outline: none;
}