/* ==========================================================================
   MIRA Design System — Design Tokens
   미라파트너스 디자인 시스템 기반
   Source: MIRA DESIGN SYSTEM_shinhee.fig
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     BRAND COLORS (브랜드 컬러)
     이메일/공지 헤더, 슬라이드 표지, 주요 브랜드 표현에 사용
     -------------------------------------------------------------------------- */
  /* 키컬러 원칙: 보라는 로고·버튼·링크·아이콘·작은 강조에만 사용.
     히어로/섹션 배경을 풀 보라로 채우지 말 것. 넓은 영역의 기본은
     화이트 / 뉴트럴(--bg-secondary) / 딥다크(--mira-brand-ink-900).
     ⚠️ 연보라(--bg-brand-soft)는 넓게 깔지 말 것 — 칩/뱃지/단일 강조 카드 등
     작은 보조 면적에만. 넓게 쓰면 전문 VC 톤이 깨지고 파스텔처럼 보임. */
  --mira-brand-primary: #49317B;        /* color-semantic-primary-normal — 공식 Primary(키컬러) */
  --mira-brand-primary-strong: #3A2663; /* Strong — hover / 짙은 강조 (구 헤더 톤) */
  --mira-brand-primary-deep: #2A1B47;   /* Heavy — 가장 짙은 톤 */
  --mira-brand-ink-850: #241A3B;        /* 브랜드 다크 850 — 다크 섹션/표지/푸터 */
  --mira-brand-ink-900: #1A1230;        /* 브랜드 다크 900 — 가장 짙은 (기본 다크) */

  /* STARTUP 브랜드 (네이비) — 스타트업 관련 산출물 전용.
     [data-brand="startup"] 가 켜지면 아래 값이 --mira-brand-* 를 덮어쓴다. */
  --mira-startup-primary: #042C6B;      /* 스타트업 메인 (키컬러) */
  --mira-startup-strong:  #03245A;      /* Strong — hover/짙은 강조 (파생) */
  --mira-startup-900:     #022050;      /* 900 — 가장 짙은 (지정값) */
  --mira-startup-ink-900: #02163C;      /* 다크 섹션 배경 네이비 (파생) */
  --mira-startup-accent:  #DCE6F5;      /* 연네이비 — 작은 강조용 (파생) */
  --mira-startup-accent-soft: #EFF4FB;  /* 연네이비 soft (파생) */
  --mira-brand-accent: #EAE5F6;         /* 라벤더 — 카드 보더, 인용 강조 */
  --mira-brand-accent-soft: #F5F3F8;    /* 연 라벤더 — 넓은 영역/배경용 */

  /* --------------------------------------------------------------------------
     ATOMIC PALETTE — Coolneutral (메인 그레이 스케일)
     본문, UI 표면, 보더 전반에 사용
     -------------------------------------------------------------------------- */
  --color-coolneutral-99: #F7F7F8;
  --color-coolneutral-98: #F4F4F5;
  --color-coolneutral-95: #EAEBEC;
  --color-coolneutral-90: #E1E2E4;
  --color-coolneutral-80: #DBDCDF;
  --color-coolneutral-70: #C2C4C8;
  --color-coolneutral-60: #AEB0B6;
  --color-coolneutral-50: #989BA2;
  --color-coolneutral-40: #878A93;
  --color-coolneutral-39: #70737C;
  --color-coolneutral-30: #5A5C63;
  --color-coolneutral-20: #46474C;
  --color-coolneutral-15: #37383C;
  --color-coolneutral-13: #333438;
  --color-coolneutral-12: #2E2F33;
  --color-coolneutral-11: #292A2D;
  --color-coolneutral-10: #212225;
  --color-coolneutral-8:  #1B1C1E;
  --color-coolneutral-5:  #171719;

  /* Blue — 정보/포커스용 (링크는 보라 키컬러 사용) */
  --color-blue-99: #F7FBFF;
  --color-blue-95: #EAF2FE;
  --color-blue-90: #C9DEFE;
  --color-blue-80: #9EC5FF;
  --color-blue-70: #69A5FF;
  --color-blue-60: #4F95FF;
  --color-blue-50: #3385FF;
  --color-blue-40: #1A75FF;
  --color-blue-39: #0066FF;     /* Primary blue */
  --color-blue-30: #005EEB;
  --color-blue-20: #0054D1;
  --color-blue-10: #003E9C;

  /* Violet — 브랜드 톤과 어울리는 보조 강조 */
  --color-violet-99: #FBFAFF;
  --color-violet-95: #F0ECFE;
  --color-violet-90: #DBD3FE;
  --color-violet-80: #C0B0FF;
  --color-violet-70: #9E86FC;
  --color-violet-60: #7D5EF7;
  --color-violet-50: #6541F2;
  --color-violet-40: #5B37ED;
  --color-violet-30: #4F29E5;
  --color-violet-20: #3A16C9;
  --color-violet-10: #23098F;

  /* Red — Negative / Critical */
  --color-red-95: #FEECEC;
  --color-red-50: #FF4242;
  --color-red-30: #B20C0C;

  /* Green — Positive */
  --color-green-95: #D9FFE6;
  --color-green-50: #00BF40;
  --color-green-30: #006E25;

  /* Orange — Warning */
  --color-orange-95: #FEF4E6;
  --color-orange-50: #FF9200;
  --color-orange-30: #9C5800;

  /* --------------------------------------------------------------------------
     SEMANTIC COLORS (시맨틱 — 사용은 이 토큰 우선)
     -------------------------------------------------------------------------- */
  /* Background */
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--color-coolneutral-99);
  --bg-tertiary: var(--color-coolneutral-98);
  --bg-inverse: var(--mira-brand-ink-900);  /* 다크 섹션 기본 — 브랜드 보라가 밴 딥 다크 */
  --bg-brand: var(--mira-brand-primary);
  --bg-brand-soft: var(--mira-brand-accent);

  /* Surface (카드, 모달) */
  --surface-default: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--color-coolneutral-99);

  /* Text */
  --text-primary: #171719;                   /* coolneutral-5 — 본문 강조 */
  --text-secondary: rgba(46, 47, 51, 0.88);  /* 본문 */
  --text-tertiary: rgba(55, 56, 60, 0.61);   /* 보조/캡션 */
  --text-disabled: rgba(55, 56, 60, 0.28);
  --text-inverse: #FFFFFF;
  --text-brand: var(--mira-brand-primary);
  --text-link: var(--mira-brand-primary);
  --text-success: var(--color-green-30);
  --text-warning: var(--color-orange-30);
  --text-danger: var(--color-red-30);

  /* Border / Divider */
  --border-subtle: rgba(112, 115, 124, 0.12);
  --border-default: rgba(112, 115, 124, 0.22);
  --border-strong: var(--color-coolneutral-39);
  --border-brand: var(--mira-brand-primary);
  --border-accent: var(--mira-brand-accent);

  /* Action (버튼) */
  --action-primary-bg: var(--mira-brand-primary);
  --action-primary-bg-hover: var(--mira-brand-primary-strong);
  --action-primary-text: #FFFFFF;

  --action-secondary-bg: #FFFFFF;
  --action-secondary-bg-hover: var(--color-coolneutral-99);
  --action-secondary-text: var(--mira-brand-primary);
  --action-secondary-border: var(--mira-brand-primary);

  --action-ghost-bg: transparent;
  --action-ghost-bg-hover: var(--color-coolneutral-99);
  --action-ghost-text: var(--text-primary);

  --action-disabled-bg: var(--color-coolneutral-95);
  --action-disabled-text: var(--text-disabled);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(73, 49, 123, 0.25);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY (Pretendard — 일반 프리텐다드 사용)
     CDN: https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css
     -------------------------------------------------------------------------- */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", "D2Coding", monospace;

  /* Type scale — 7단계 위계 (Display → Caption) */
  /* Display 2 */
  --type-display-2-size: 40px;
  --type-display-2-line: 1.30;
  --type-display-2-tracking: -0.0282em;
  --type-display-2-weight: 700;
  /* Display 3 */
  --type-display-3-size: 36px;
  --type-display-3-line: 1.334;
  --type-display-3-tracking: -0.027em;
  --type-display-3-weight: 700;
  /* Title 1 */
  --type-title-1-size: 32px;
  --type-title-1-line: 1.375;
  --type-title-1-tracking: -0.0253em;
  --type-title-1-weight: 700;
  /* Title 2 */
  --type-title-2-size: 28px;
  --type-title-2-line: 1.358;
  --type-title-2-tracking: -0.0236em;
  --type-title-2-weight: 700;
  /* Title 3 */
  --type-title-3-size: 24px;
  --type-title-3-line: 1.334;
  --type-title-3-tracking: -0.023em;
  --type-title-3-weight: 700;
  /* Heading 1 */
  --type-heading-1-size: 22px;
  --type-heading-1-line: 1.364;
  --type-heading-1-tracking: -0.0194em;
  --type-heading-1-weight: 600;
  /* Heading 2 */
  --type-heading-2-size: 20px;
  --type-heading-2-line: 1.4;
  --type-heading-2-tracking: -0.012em;
  --type-heading-2-weight: 600;
  /* Headline 1 */
  --type-headline-1-size: 18px;
  --type-headline-1-line: 1.445;
  --type-headline-1-tracking: -0.002em;
  --type-headline-1-weight: 600;
  /* Headline 2 */
  --type-headline-2-size: 17px;
  --type-headline-2-line: 1.412;
  --type-headline-2-tracking: 0em;
  --type-headline-2-weight: 600;
  /* Body 1 — 본문 기본 */
  --type-body-1-size: 16px;
  --type-body-1-line: 1.5;
  --type-body-1-tracking: 0.0057em;
  --type-body-1-weight: 500;
  /* Body 1 Reading — 긴 본문 */
  --type-body-1-reading-size: 16px;
  --type-body-1-reading-line: 1.625;
  --type-body-1-reading-tracking: 0.0057em;
  /* Body 2 */
  --type-body-2-size: 15px;
  --type-body-2-line: 1.467;
  --type-body-2-tracking: 0.0096em;
  /* Label 1 */
  --type-label-1-size: 14px;
  --type-label-1-line: 1.429;
  --type-label-1-tracking: 0.0145em;
  --type-label-1-weight: 600;
  /* Label 2 */
  --type-label-2-size: 13px;
  --type-label-2-line: 1.385;
  --type-label-2-tracking: 0.0194em;
  --type-label-2-weight: 600;
  /* Caption 1 */
  --type-caption-1-size: 12px;
  --type-caption-1-line: 1.334;
  --type-caption-1-tracking: 0.0252em;
  --type-caption-1-weight: 500;
  /* Caption 2 */
  --type-caption-2-size: 11px;
  --type-caption-2-line: 1.273;
  --type-caption-2-tracking: 0.0311em;
  --type-caption-2-weight: 500;

  /* --------------------------------------------------------------------------
     SPACING (8px 베이스, 일부 4px 단위 보완)
     -------------------------------------------------------------------------- */
  --space-0: 0;
  --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;

  /* --------------------------------------------------------------------------
     RADIUS
     -------------------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-pill: 2500px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOW (Figma 그림자 스펙 반영 — 매우 절제된 톤)
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 8px rgba(23, 23, 23, 0.06), 0 2px 4px rgba(23, 23, 23, 0.04);
  --shadow-lg: 0 12px 24px rgba(23, 23, 23, 0.08), 0 4px 8px rgba(23, 23, 23, 0.06);
  --shadow-xl: 0 24px 48px rgba(23, 23, 23, 0.10), 0 8px 16px rgba(23, 23, 23, 0.06);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-mobile: 375px;
  --container-tablet: 768px;
  --container-desktop: 1280px;
  --container-wide: 1440px;
  --email-width: 600px;
  --slide-w: 1920px;
  --slide-h: 1080px;
}

/* ============================================================================
   BASE — 글로벌 리셋 + 기본 타이포
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-1-size);
  line-height: var(--type-body-1-line);
  letter-spacing: var(--type-body-1-tracking);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   TYPE UTILITIES — class로 위계 적용
   ============================================================================ */
.t-display-2  { font-size: var(--type-display-2-size); line-height: var(--type-display-2-line); letter-spacing: var(--type-display-2-tracking); font-weight: var(--type-display-2-weight); }
.t-display-3  { font-size: var(--type-display-3-size); line-height: var(--type-display-3-line); letter-spacing: var(--type-display-3-tracking); font-weight: var(--type-display-3-weight); }
.t-title-1    { font-size: var(--type-title-1-size); line-height: var(--type-title-1-line); letter-spacing: var(--type-title-1-tracking); font-weight: var(--type-title-1-weight); }
.t-title-2    { font-size: var(--type-title-2-size); line-height: var(--type-title-2-line); letter-spacing: var(--type-title-2-tracking); font-weight: var(--type-title-2-weight); }
.t-title-3    { font-size: var(--type-title-3-size); line-height: var(--type-title-3-line); letter-spacing: var(--type-title-3-tracking); font-weight: var(--type-title-3-weight); }
.t-heading-1  { font-size: var(--type-heading-1-size); line-height: var(--type-heading-1-line); letter-spacing: var(--type-heading-1-tracking); font-weight: var(--type-heading-1-weight); }
.t-heading-2  { font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line); letter-spacing: var(--type-heading-2-tracking); font-weight: var(--type-heading-2-weight); }
.t-headline-1 { font-size: var(--type-headline-1-size); line-height: var(--type-headline-1-line); letter-spacing: var(--type-headline-1-tracking); font-weight: var(--type-headline-1-weight); }
.t-headline-2 { font-size: var(--type-headline-2-size); line-height: var(--type-headline-2-line); letter-spacing: var(--type-headline-2-tracking); font-weight: var(--type-headline-2-weight); }
.t-body-1     { font-size: var(--type-body-1-size); line-height: var(--type-body-1-line); letter-spacing: var(--type-body-1-tracking); font-weight: var(--type-body-1-weight); }
.t-body-1-rd  { font-size: var(--type-body-1-reading-size); line-height: var(--type-body-1-reading-line); letter-spacing: var(--type-body-1-reading-tracking); font-weight: 500; }
.t-body-2     { font-size: var(--type-body-2-size); line-height: var(--type-body-2-line); letter-spacing: var(--type-body-2-tracking); font-weight: 500; }
.t-label-1    { font-size: var(--type-label-1-size); line-height: var(--type-label-1-line); letter-spacing: var(--type-label-1-tracking); font-weight: var(--type-label-1-weight); }
.t-label-2    { font-size: var(--type-label-2-size); line-height: var(--type-label-2-line); letter-spacing: var(--type-label-2-tracking); font-weight: var(--type-label-2-weight); }
.t-caption-1  { font-size: var(--type-caption-1-size); line-height: var(--type-caption-1-line); letter-spacing: var(--type-caption-1-tracking); font-weight: var(--type-caption-1-weight); }
.t-caption-2  { font-size: var(--type-caption-2-size); line-height: var(--type-caption-2-line); letter-spacing: var(--type-caption-2-tracking); font-weight: var(--type-caption-2-weight); }

/* ============================================================================
   STARTUP 테마 오버라이드
   스타트업 관련 페이지/산출물에서 <html data-brand="startup"> (또는 컨테이너에)
   를 달면 메인 키컬러가 보라(#49317B) → 네이비(#042C6B)로 전환됩니다.
   모든 mira-* 컴포넌트와 시맨틱 토큰이 자동으로 재색상됩니다.
   VC/회사 자체 페이지는 이 속성 없이 기본(보라)을 사용하세요.
   ============================================================================ */
[data-brand="startup"] {
  --mira-brand-primary:        var(--mira-startup-primary);
  --mira-brand-primary-strong: var(--mira-startup-strong);
  --mira-brand-primary-deep:   var(--mira-startup-900);
  --mira-brand-ink-900:        var(--mira-startup-ink-900);
  --mira-brand-accent:         var(--mira-startup-accent);
  --mira-brand-accent-soft:    var(--mira-startup-accent-soft);

  --bg-brand:        var(--mira-startup-primary);
  --bg-brand-soft:   var(--mira-startup-accent);
  --bg-inverse:      var(--mira-startup-ink-900);
  --text-brand:      var(--mira-startup-primary);
  --text-link:       var(--mira-startup-primary);
  --border-brand:    var(--mira-startup-primary);
  --border-accent:   var(--mira-startup-accent);

  --action-primary-bg:       var(--mira-startup-primary);
  --action-primary-bg-hover: var(--mira-startup-strong);
  --action-secondary-text:   var(--mira-startup-primary);
  --action-secondary-border: var(--mira-startup-primary);

  --focus-ring: 0 0 0 3px rgba(4, 44, 107, 0.25);
}