/* ────────────────────────────────────────────────────────────────────────────
   CMDS Design System · Colors & Type
   Lifted from DESIGN.md (alpha spec) + design-tokens.json.
   Light mode anchors on CMDS Green (#134538); dark mode pivots to
   CMDS Pink (#E985A2). Never use green CTAs in dark mode — flip to Pink.
   ──────────────────────────────────────────────────────────────────────────── */

/* Korean fallback. SF Pro / SF Pro Display come from the OS on Apple devices;
   Pretendard handles every non-Apple platform AND Korean glyphs. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  /* ────────── FONT STACKS ────────── */
  --font-sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Pretendard", "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Pretendard", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   ui-serif, "New York", "Pretendard", Georgia, "Times New Roman", serif; /* editorial only */
  --font-mono:    ui-monospace, "SF Mono", "Menlo", "JetBrains Mono", Consolas, monospace;

  /* ────────── BRAND · CMDS GREEN (primary, light mode accent) ────────── */
  --cmds-green:        #134538;
  --cmds-green-hover:  #1A5D4B;
  --cmds-green-bright: #22896A;
  --cmds-green-glow:   #2FB488;
  --cmds-green-50:     #F1F7F4;
  --cmds-green-100:    #DCEBE3;
  --cmds-green-200:    #BAD9C9;
  --cmds-green-800:    #0D3529;
  --cmds-green-900:    #0A2820;

  /* ────────── BRAND · CMDS PINK (dark mode accent) ────────── */
  --cmds-pink:         #E985A2;
  --cmds-pink-light:   #F4A4B8;
  --cmds-pink-dark:    #D16C8A;
  --cmds-pink-soft:    #2B1922;

  /* ────────── NEUTRALS · LIGHT ────────── */
  --neutral-50:   #FBFBFA;
  --neutral-100:  #FFFFFF;
  --neutral-150:  #F5F6F4;
  --neutral-200:  #E6E8E6;
  --neutral-300:  #D0D3D0;
  --neutral-500:  #8A938E;
  --neutral-700:  #4A544F;
  --neutral-900:  #0B0D0C;

  /* ────────── NEUTRALS · DARK ────────── */
  --neutral-dark-50:     #F2F4F3;
  --neutral-dark-300:    #9AA39D;
  --neutral-dark-500:    #626A66;
  --neutral-dark-700:    #26302A;
  --neutral-dark-800:    #1A231F;
  --neutral-dark-900:    #0B0F0D;
  --neutral-dark-elev:   #0D1411;
  --neutral-dark-subtle: #0A1110;

  /* ────────── SEMANTIC · LIGHT MODE (default) ────────── */
  --bg:            var(--neutral-50);
  --bg-elev:       var(--neutral-100);
  --bg-subtle:     var(--neutral-150);
  --bg-code:       #F5F5F3;
  --fg:            var(--neutral-900);
  --fg-muted:      var(--neutral-700);
  --fg-subtle:     var(--neutral-500);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --accent:        var(--cmds-green);
  --accent-hover:  var(--cmds-green-hover);
  --accent-soft:   var(--cmds-green-50);
  --accent-strong: var(--cmds-green-800);
  --on-accent:     #FFFFFF;
  --warn:          #B45309;

  /* ────────── TYPE · SIZES ────────── */
  --fs-hero:    clamp(48px, 8vw,   104px);
  --fs-h1:      clamp(36px, 5vw,   60px);
  --fs-h2:      clamp(24px, 2.6vw, 36px);
  --fs-h3:      32px;
  --fs-lead:    clamp(19px, 1.8vw, 22px);
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-body-sm: 14px;
  --fs-label:   13px;
  --fs-code:    0.9em;

  /* ────────── TYPE · TRACKING (negative letter-spacing is the signature) ────────── */
  --track-hero:  -0.042em;
  --track-h1:    -0.028em;
  --track-h2:    -0.018em;
  --track-h3:    -0.028em;
  --track-lead:  -0.015em;
  --track-body:  -0.011em;  /* body fundamental */
  --track-sm:    -0.008em;
  --track-label: -0.005em;

  /* ────────── TYPE · LINE-HEIGHT ────────── */
  --lh-hero:    1.02;
  --lh-display: 1.10;
  --lh-h2:      1.20;
  --lh-tight:   1.30;
  --lh-body:    1.55;  /* never below 1.5 */

  /* ────────── RADII ────────── */
  --r-none:  0px;
  --r-sm:    6px;
  --r-md:    8px;
  --r-lg:    16px;
  --r-xl:    20px;   /* cards */
  --r-pill:  999px;  /* buttons, chips */
  --r-round: 50%;    /* logo mark */

  /* ────────── SPACING ────────── */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 80px;
  --sp-section: clamp(24px, 5vw, 80px);
  --sp-block:   clamp(80px, 10vw, 140px);

  /* ────────── LAYOUT ────────── */
  --lw-page:    1200px;
  --lw-content: 720px;
  --lw-sidebar: 280px;
  --lw-toc:     240px;
  --header-h:   56px;

  /* ────────── SHADOWS (sparingly — only on primary buttons by default) ────────── */
  --shadow-card-rest:   0 1px 2px rgba(19,69,56,0.06);
  --shadow-card-hover:  0 1px 2px rgba(19,69,56,0.06), 0 8px 24px -8px rgba(19,69,56,0.18);
  --shadow-btn-primary: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 2px rgba(19,69,56,0.20), 0 8px 24px -8px rgba(19,69,56,0.30);
  --shadow-btn-primary-hover: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 4px rgba(19,69,56,0.25), 0 16px 36px -12px rgba(19,69,56,0.40);
}

/* ────────── SEMANTIC · DARK MODE (accent flips green → pink) ────────── */
[data-theme="dark"] {
  --bg:            var(--neutral-dark-900);
  --bg-elev:       var(--neutral-dark-elev);
  --bg-subtle:     var(--neutral-dark-subtle);
  --bg-code:       #161C19;
  --fg:            var(--neutral-dark-50);
  --fg-muted:      var(--neutral-dark-300);
  --fg-subtle:     var(--neutral-dark-500);
  --border:        var(--neutral-dark-800);
  --border-strong: var(--neutral-dark-700);
  --accent:        var(--cmds-pink);
  --accent-hover:  var(--cmds-pink-dark);
  --accent-soft:   var(--cmds-pink-soft);
  --accent-strong: var(--cmds-pink-light);
  --on-accent:     var(--neutral-dark-900);

  --shadow-card-rest:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-card-hover:  0 1px 2px rgba(0,0,0,0.40), 0 8px 24px -8px rgba(0,0,0,0.60);
  --shadow-btn-primary: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 6px rgba(0,0,0,0.40), 0 12px 32px -12px rgba(233,133,162,0.40);
  --shadow-btn-primary-hover: inset 0 1px 0 rgba(255,255,255,0.20), 0 2px 6px rgba(0,0,0,0.40), 0 16px 40px -12px rgba(233,133,162,0.55);
}

/* ────────────────────────────────────────────────────────────────────────────
   SEMANTIC ELEMENTS — drop these onto plain markup and you get CMDS type.
   ──────────────────────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "calt", "ss01";
  text-rendering: optimizeLegibility;
}

.hero, h1.hero, .type-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: var(--track-hero);
}

h1, .type-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--track-h1);
}

h2, .type-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
}

h3, .type-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--track-h3);
}

.lead, .type-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-lead);
  color: var(--fg-muted);
}

p, .type-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

.type-body, .body-md {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

small, .type-body-sm {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  letter-spacing: var(--track-sm);
}

.label, .type-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

code, kbd, samp, .type-code {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-weight: 400;
}

a { color: var(--accent); text-decoration: none; transition: opacity .15s ease; }
a:hover { opacity: 0.7; }

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }