/* =========================================================================
   ValueConnect Design System — Tokens
   Color + Type foundations. Inspired by content-first dark aesthetic.
   ========================================================================= */

/* Fonts:
   Brand calls for SpotifyMixUI / CircularSp (proprietary, unavailable).
   Substituted: Manrope (display + UI), JetBrains Mono (code).
   Pretendard recommended for Korean — listed in fallback stack.
   Each consuming HTML page should load these from Google Fonts:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
*/

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --vc-pulse:        #3ddc97;   /* Primary accent — "match found", play, CTA */
  --vc-pulse-deep:   #2bb87b;   /* Hover / pressed accent */
  --vc-pulse-soft:   rgba(61, 220, 151, 0.12);

  /* ── Surface (Near-black ladder) ───────────────────────── */
  --vc-bg:           #0e0e10;   /* Page background — deepest */
  --vc-surface-1:    #161618;   /* Cards, sidebar */
  --vc-surface-2:    #1c1c1f;   /* Buttons, interactive surfaces */
  --vc-surface-3:    #232327;   /* Elevated cards */
  --vc-surface-4:    #2a2a2f;   /* Hover-lift cards */

  /* ── Text ──────────────────────────────────────────────── */
  --vc-text:         #ffffff;   /* Primary text */
  --vc-text-bright:  #fdfdfd;   /* Max emphasis */
  --vc-text-2:       #cbcbcb;   /* Slightly muted */
  --vc-text-muted:   #a8a8ad;   /* Secondary text, inactive nav */
  --vc-text-faint:   #6e6e73;   /* Disabled, tertiary metadata */

  /* ── Border ────────────────────────────────────────────── */
  --vc-border:       #2e2e33;   /* Subtle dividers */
  --vc-border-2:     #4d4d4d;   /* Button borders on dark */
  --vc-border-3:     #7c7c7c;   /* Outlined button borders */
  --vc-border-pulse: #2bb87b;   /* Accent border */

  /* ── Semantic ──────────────────────────────────────────── */
  --vc-success:      #3ddc97;
  --vc-info:         #539df5;   /* Announcement blue */
  --vc-warning:      #ffa42b;   /* Warning orange */
  --vc-danger:       #f3727f;   /* Negative red */

  --vc-success-soft: rgba(61, 220, 151, 0.14);
  --vc-info-soft:    rgba(83, 157, 245, 0.14);
  --vc-warning-soft: rgba(255, 164, 43, 0.14);
  --vc-danger-soft:  rgba(243, 114, 127, 0.14);

  /* ── Match-score ramp (recruiting domain) ──────────────── */
  --vc-match-90:     #3ddc97;   /* 90–100% match — strong */
  --vc-match-70:     #b8e04a;   /* 70–89%       — good   */
  --vc-match-50:     #ffa42b;   /* 50–69%       — middling */
  --vc-match-30:     #f3727f;   /* <50%         — weak   */

  /* ── Shadows ───────────────────────────────────────────── */
  --vc-shadow-card:    rgba(0, 0, 0, 0.3) 0px 8px 8px;
  --vc-shadow-elev:    rgba(0, 0, 0, 0.5) 0px 8px 24px;
  --vc-shadow-dialog:  rgba(0, 0, 0, 0.6) 0px 16px 48px;
  --vc-shadow-input:   rgb(18, 18, 18) 0px 1px 0px,
                       rgb(124, 124, 124) 0px 0px 0px 1px inset;
  --vc-shadow-input-focus: rgb(18, 18, 18) 0px 1px 0px,
                           rgb(61, 220, 151) 0px 0px 0px 2px inset;
  --vc-glow-pulse:     0 0 0 4px rgba(61, 220, 151, 0.18);

  /* ── Spacing (8pt baseline) ────────────────────────────── */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 20px;
  --vc-space-6: 24px;
  --vc-space-7: 32px;
  --vc-space-8: 40px;
  --vc-space-9: 56px;
  --vc-space-10: 80px;

  /* ── Radius ────────────────────────────────────────────── */
  --vc-radius-1: 2px;     /* Badges */
  --vc-radius-2: 4px;     /* Inputs, tags */
  --vc-radius-3: 6px;     /* Avatars, small cards */
  --vc-radius-4: 8px;     /* Cards, dialogs */
  --vc-radius-5: 12px;    /* Sections */
  --vc-radius-6: 16px;    /* Panels */
  --vc-radius-pill: 500px;/* Primary buttons, search */
  --vc-radius-full: 9999px;
  --vc-radius-circle: 50%;

  /* ── Type families ─────────────────────────────────────── */
  --vc-font-display: "Manrope", "Pretendard", "SpotifyMixUITitle",
                     -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                     "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --vc-font-sans:    "Manrope", "Pretendard",
                     -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                     "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --vc-font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale ────────────────────────────────────────── */
  --vc-text-display:  44px;   /* Hero numerals, marketing */
  --vc-text-h1:       32px;
  --vc-text-h2:       24px;   /* Section title */
  --vc-text-h3:       18px;   /* Feature heading */
  --vc-text-body-lg:  16px;
  --vc-text-body:     14px;
  --vc-text-caption:  12px;
  --vc-text-micro:    10px;

  --vc-leading-tight:   1.10;
  --vc-leading-snug:    1.30;
  --vc-leading-normal:  1.50;

  /* ── Transitions ───────────────────────────────────────── */
  --vc-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --vc-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --vc-dur-fast:       120ms;
  --vc-dur:            200ms;
  --vc-dur-slow:       320ms;
}

/* =========================================================================
   Semantic element rules
   ========================================================================= */

html, body {
  background: var(--vc-bg);
  color: var(--vc-text);
  font-family: var(--vc-font-sans);
  font-size: var(--vc-text-body);
  line-height: var(--vc-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .vc-h1 {
  font-family: var(--vc-font-display);
  font-size: var(--vc-text-h1);
  font-weight: 800;
  line-height: var(--vc-leading-tight);
  letter-spacing: -0.01em;
  color: var(--vc-text-bright);
}
h2, .vc-h2 {
  font-family: var(--vc-font-display);
  font-size: var(--vc-text-h2);
  font-weight: 700;
  line-height: var(--vc-leading-snug);
  letter-spacing: -0.005em;
  color: var(--vc-text);
}
h3, .vc-h3 {
  font-family: var(--vc-font-sans);
  font-size: var(--vc-text-h3);
  font-weight: 600;
  line-height: var(--vc-leading-snug);
  color: var(--vc-text);
}
p, .vc-body {
  font-size: var(--vc-text-body);
  font-weight: 400;
  line-height: var(--vc-leading-normal);
  color: var(--vc-text-2);
}
small, .vc-caption {
  font-size: var(--vc-text-caption);
  font-weight: 400;
  color: var(--vc-text-muted);
}
.vc-micro {
  font-size: var(--vc-text-micro);
  font-weight: 400;
  color: var(--vc-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vc-eyebrow {
  font-size: var(--vc-text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vc-text-muted);
}
.vc-button-label {
  font-size: var(--vc-text-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
}
code, pre, kbd, .vc-mono {
  font-family: var(--vc-font-mono);
  font-size: 0.92em;
}

::selection {
  background: var(--vc-pulse);
  color: #0b0b0d;
}