/* ConnectUp Design System — Colors & Typography */

@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/PretendardVariable.ttf") format("truetype-variations");
}

:root {
  /* ── Brand / Primary (SkyBlue) ─────────────────────────────── */
  --skyblue-10:  #EAF4FF;
  --skyblue-20:  #D4E8FF;
  --skyblue-30:  #BFDDFF;
  --skyblue-40:  #A9D1FF;
  --skyblue-50:  #94C6FF;
  --skyblue-60:  #7EBAFF;
  --skyblue-70:  #69AFFF;
  --skyblue-80:  #53A3FF;
  --skyblue-90:  #3E98FF;
  --skyblue-100: #288CFF;   /* main */
  --skyblue-110: #1464F0;

  /* ── Yellow / Sub ──────────────────────────────────────────── */
  --yellow-10:  #FFF9E6;
  --yellow-20:  #FFF2CE;
  --yellow-30:  #FFECB6;
  --yellow-40:  #FFE59D;
  --yellow-50:  #FFDF85;
  --yellow-60:  #FFD86C;
  --yellow-70:  #FFD254;
  --yellow-80:  #FFCB3B;
  --yellow-90:  #FFC523;
  --yellow-100: #FFBE0A;
  --yellow-110: #FFA00A;

  /* ── Neutral / Grey ────────────────────────────────────────── */
  --grey-00:  #FFFFFF;
  --grey-10:  #F9F9F9;
  --grey-20:  #F5F5F5;
  --grey-30:  #EAEAEC;
  --grey-40:  #DDDDE0;
  --grey-50:  #CCCCD1;
  --grey-60:  #B9B9BE;
  --grey-70:  #9999A0;
  --grey-80:  #666670;
  --grey-90:  #33333E;
  --grey-100: #000000;

  /* ── Semantic / System ─────────────────────────────────────── */
  --green-10: #EEF5EB;
  --green-20: #CAEEC4;
  --green-30: #85D697;
  --red-10:   #FCEFF1;
  --red-20:   #FBD2D2;
  --red-30:   #FF8A83;
  --red-40:   #F64141;

  /* ── Gradients ─────────────────────────────────────────────── */
  --gradient-blue:   linear-gradient(135deg, #BFDDFF 0%, #288CFF 100%);
  --gradient-blue-2: linear-gradient(135deg, #A9D1FF 0%, #288CFF 100%);
  --gradient-yellow: linear-gradient(135deg, #FFA00A 0%, #FFBE0A 100%);

  /* ── Semantic surface tokens ───────────────────────────────── */
  --bg:            var(--grey-00);
  --bg-soft:       var(--grey-10);
  --bg-muted:      var(--grey-20);
  --surface:       var(--grey-00);
  --border:        var(--grey-30);
  --border-strong: var(--grey-40);
  --divider:       var(--grey-30);

  --fg:            var(--grey-90);     /* primary text */
  --fg-strong:     var(--grey-100);
  --fg-muted:      var(--grey-80);
  --fg-subtle:     var(--grey-70);
  --fg-disabled:   var(--grey-60);
  --fg-on-brand:   #FFFFFF;

  --brand:         var(--skyblue-100);
  --brand-hover:   var(--skyblue-110);
  --brand-soft:    var(--skyblue-10);
  --brand-border:  var(--skyblue-40);

  --accent:        var(--yellow-100);
  --success:       var(--green-30);
  --danger:        var(--red-40);
  --warning:       var(--yellow-110);
  --info:          var(--skyblue-100);

  /* ── Shadows (10 → 100, low to high elevation) ─────────────── */
  --shadow-10:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-20:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-30:  0 2px 4px rgba(0,0,0,0.06);
  --shadow-40:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-50:  0 4px 10px rgba(0,0,0,0.06);
  --shadow-60:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-70:  0 6px 20px rgba(0,0,0,0.08);
  --shadow-80:  0 8px 24px rgba(0,0,0,0.08);
  --shadow-90:  0 12px 32px rgba(0,0,0,0.10);
  --shadow-100: 0 16px 48px rgba(0,0,0,0.12);

  /* ── Spacing (4-base) ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;   /* common */
  --space-4:   16px;   /* common */
  --space-5:   20px;   /* common */
  --space-6:   24px;
  --space-7:   28px;   /* common */
  --space-8:   32px;
  --space-9:   36px;   /* common */
  --space-10:  40px;
  --space-12:  48px;   /* common */
  --space-14:  56px;   /* common */
  --space-17:  68px;   /* common */
  --space-20:  80px;   /* common */
  --space-25:  100px;  /* common */
  --space-30:  120px;  /* common */
  --space-40:  160px;  /* common */
  --space-50:  200px;
  --space-60:  240px;

  /* ── Radii (rounded corners — brand directive) ─────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-3xl:   24px;
  --radius-pill:  9999px;

  /* ── Type families ─────────────────────────────────────────── */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
               BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue",
               "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR",
               "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", sans-serif;
  --font-display: "Pretendard Variable", "Pretendard", "Noto Sans KR",
                  -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  /* ── Type scale ────────────────────────────────────────────── */
  /* 큰 제목 (display) */
  --fs-display-lg: 56px;     --lh-display-lg: 1.5;     /* 1.5(56) */
  --fs-display:    40px;     --lh-display:    1.5;     /* 2.5(40) */
  --fs-display-sm: 32px;     --lh-display-sm: 1.5;

  /* 작은 제목 (s-head) */
  --fs-shead-1: 36px;        --lh-shead-1: 1.75;       /* 1.75(63) */
  --fs-shead-2: 32px;        --lh-shead-2: 1.75;       /* 1.75(56) */
  --fs-shead-3: 24px;        --lh-shead-3: 1.75;       /* 1.75(42) */
  --fs-shead-4: 20px;        --lh-shead-4: 1.75;       /* 1.75(35) */

  /* 본문 (body) */
  --fs-body-1: 16px;         --lh-body-1: 1.75;        /* 1.75(28) */
  --fs-body-2: 14px;         --lh-body-2: 1.75;        /* 1.75(24.5) */

  /* 캡션 */
  --fs-caption: 12px;        --lh-caption: 1.5;        /* 1.5(18) */
  --fs-micro:   10px;        --lh-micro:   1.5;

  /* Weights — Pretendard scale */
  --fw-thin:       100;
  --fw-extralight: 200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur-base:      180ms;
  --dur-slow:      280ms;
}

/* ── Base elements ──────────────────────────────────────────── */
html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 16px;          /* 16px = 1rem */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-shead-1);
  line-height: var(--lh-shead-1);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-shead-2);
  line-height: var(--lh-shead-2);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
h3, .h3 {
  font-size: var(--fs-shead-3);
  line-height: var(--lh-shead-3);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}
h4, .h4 {
  font-size: var(--fs-shead-4);
  line-height: var(--lh-shead-4);
  font-weight: var(--fw-extrabold);
  color: var(--fg-strong);
}

p, .body {
  font-size: var(--fs-body-1);
  line-height: var(--lh-body-1);
  font-weight: var(--fw-regular);
  color: var(--fg);
}
.body-2 {
  font-size: var(--fs-body-2);
  line-height: var(--lh-body-2);
  font-weight: var(--fw-regular);
  color: var(--fg);
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-muted);
}
small { font-size: var(--fs-caption); color: var(--fg-muted); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--grey-20);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}