/* ============================================================
   IDISMAN Design System — colors_and_type.css
   Achromatic (무채색) only. GitHub-inspired type (Mona Sans + Mona Sans Mono)
   with Pretendard for Hangul.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("fonts/MonaSans-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Mona Sans Mono"; src: url("fonts/MonaSansMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mona Sans Mono"; src: url("fonts/MonaSansMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mona Sans Mono"; src: url("fonts/MonaSansMono-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pretendard"; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---------- Neutral scale (pure achromatic, chroma 0) ---------- */
  --gray-0:   #ffffff;
  --gray-25:  #fafafa;
  --gray-50:  #f5f5f5;
  --gray-100: #ececec;
  --gray-200: #dedede;
  --gray-300: #c4c4c4;
  --gray-400: #9e9e9e;
  --gray-500: #7a7a7a;
  --gray-600: #5c5c5c;
  --gray-700: #3d3d3d;
  --gray-800: #262626;
  --gray-850: #1c1c1c;
  --gray-900: #141414;
  --gray-950: #0a0a0a;
  --gray-1000:#000000;

  /* ---------- Semantic — light (default) ---------- */
  --bg:          var(--gray-0);
  --bg-subtle:   var(--gray-50);
  --bg-muted:    var(--gray-100);
  --bg-inverse:  var(--gray-950);
  --fg1:         var(--gray-950);   /* primary text */
  --fg2:         var(--gray-600);   /* secondary text */
  --fg3:         var(--gray-400);   /* tertiary / meta */
  --fg-inverse:  var(--gray-0);
  --border:      var(--gray-200);
  --border-strong: var(--gray-950);
  --border-muted:  var(--gray-100);
  --accent:      var(--gray-950);   /* "accent" = solid black. No hue. */
  --accent-fg:   var(--gray-0);
  --focus-ring:  var(--gray-950);

  /* Status (achromatic — differentiated by fill/outline/icon, not hue) */
  --status-on:   var(--gray-950);   /* solid */
  --status-mid:  var(--gray-500);   /* half */
  --status-off:  var(--gray-300);   /* outline */

  /* Contribution-graph style levels */
  --level-0: var(--gray-100);
  --level-1: var(--gray-300);
  --level-2: var(--gray-500);
  --level-3: var(--gray-700);
  --level-4: var(--gray-950);

  /* ---------- Type families ---------- */
  --font-sans:  "Mona Sans", "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-ko:    "Pretendard", "Mona Sans", "Apple SD Gothic Neo", sans-serif;
  --font-mono:  "Mona Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (big-type first) ---------- */
  --fs-hero:  clamp(72px, 12vw, 176px);
  --fs-d1:    96px;
  --fs-d2:    72px;
  --fs-h1:    56px;
  --fs-h2:    40px;
  --fs-h3:    28px;
  --fs-h4:    20px;
  --fs-lead:  22px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-tight: 0.95;
  --lh-snug:  1.15;
  --lh-body:  1.6;
  --lh-ko:    1.7;

  --tracking-display: -0.045em;
  --tracking-heading: -0.025em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 192px;

  /* ---------- Radii (GitHub-ish: small) ---------- */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 6px;    /* default — buttons, inputs (Primer) */
  --r-3: 12px;   /* cards */
  --r-pill: 999px;

  /* ---------- Shadows (neutral, low) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.04);
  --shadow-2: 0 1px 3px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-inset: inset 0 1px 0 rgba(0,0,0,0.04);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 480ms;

  --container: 1280px;
}

/* ---------- Dark theme (GitHub dark, achromatic) ---------- */
[data-theme="dark"] {
  --bg:          var(--gray-950);
  --bg-subtle:   var(--gray-900);
  --bg-muted:    var(--gray-850);
  --bg-inverse:  var(--gray-0);
  --fg1:         var(--gray-0);
  --fg2:         var(--gray-400);
  --fg3:         var(--gray-600);
  --fg-inverse:  var(--gray-950);
  --border:      var(--gray-800);
  --border-strong: var(--gray-0);
  --border-muted:  var(--gray-850);
  --accent:      var(--gray-0);
  --accent-fg:   var(--gray-950);
  --focus-ring:  var(--gray-0);
  --level-0: var(--gray-850);
  --level-1: var(--gray-700);
  --level-2: var(--gray-500);
  --level-3: var(--gray-300);
  --level-4: var(--gray-0);
}

/* ---------- Semantic type ---------- */
.t-hero  { font-family: var(--font-sans); font-weight: 900; font-size: var(--fs-hero); line-height: 0.88; letter-spacing: -0.055em; }
.t-d1, h1.display { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-d1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.t-d2    { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-d2); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.t-h1, h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-heading); }
.t-h2, h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-heading); }
.t-h3, h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }
.t-h4, h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: 1.35; }
.t-ko    { font-family: var(--font-ko); font-weight: 500; letter-spacing: -0.02em; line-height: var(--lh-ko); word-break: keep-all; }
.t-ko-display { font-family: var(--font-ko); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; word-break: keep-all; }
.t-lead  { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.5; color: var(--fg2); }
.t-body, p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg2); }
.t-mono, code, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bg-muted); padding: 0.15em 0.4em; border-radius: var(--r-1); }