/* =============================================================
   wvybe Design System — Colors & Type
   Derived from: Clavius Design System (Abstract 3D Shapes)
   Typeface: Pretendard (user-provided) + Plus Jakarta Sans (display)
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face { font-family: "Pretendard"; font-weight: 100; font-style: normal; src: url("/fonts/Pretendard-Thin.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 200; font-style: normal; src: url("/fonts/Pretendard-ExtraLight.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 300; font-style: normal; src: url("/fonts/Pretendard-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; src: url("/fonts/Pretendard-Regular.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal; src: url("/fonts/Pretendard-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; src: url("/fonts/Pretendard-SemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; src: url("/fonts/Pretendard-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 800; font-style: normal; src: url("/fonts/Pretendard-ExtraBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 900; font-style: normal; src: url("/fonts/Pretendard-Black.otf") format("opentype"); font-display: swap; }
/* Note: fonts/ 폴더는 이 CSS 옆에 같이 있어야 함 (vybe_home/fonts/) */

/* Display face from Clavius figma. Loaded on-demand via @import in host HTML. */
/* @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap"); */

:root {
  /* ---------- Typography families ---------- */
  --font-display: "Plus Jakarta Sans", "Pretendard", system-ui, -apple-system, sans-serif;
  --font-sans: "Pretendard", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Core palette (source of truth, from Clavius .fig metadata) ---------- */
  /* Neutrals — deep night blues with cool violet undertone */
  --color-ink-0:     rgb(7, 7, 10);       /* #07070A  page background */
  --color-ink-05:    rgb(9, 9, 13);       /* #09090D */
  --color-ink-10:    rgb(13, 13, 21);     /* #0D0D15 */
  --color-ink-20:    rgb(28, 30, 48);     /* #1C1E30  surface */
  --color-ink-30:    rgb(40, 41, 65);     /* #282941  elevated surface */
  --color-ink-40:    rgb(45, 45, 75);     /* #2D2D4B  border, dashed */
  --color-ink-50:    rgb(56, 56, 82);     /* #383852  muted text */
  --color-ink-60:    rgb(64, 65, 98);     /* #404162  border */
  --color-ink-70:    rgb(128, 126, 166);  /* #807EA6  secondary text */
  --color-ink-80:    rgb(154, 155, 209);  /* #9A9BD1  tertiary accent text */
  --color-ink-90:    rgb(201, 205, 210);  /* #C9CDD2  body on dark */
  --color-ink-95:    rgb(228, 227, 239);  /* #E4E3EF  dimmed heading */
  --color-ink-98:    rgb(240, 240, 251);  /* #F0F0FB  near-white surface */
  --color-white:     rgb(255, 255, 255);  /* #FFFFFF */

  /* Brand — electric violet & cyan pair */
  --color-violet:    rgb(93, 94, 252);    /* #5D5EFC  primary */
  --color-violet-2:  rgb(96, 97, 255);    /* #6061FF  hover */
  --color-violet-d:  rgb(53, 53, 176);    /* #3535B0  pressed / deep */
  --color-cyan:      rgb(56, 215, 237);   /* #38D7ED  accent */

  /* Alpha tokens (overlay system) */
  --alpha-white-12:  rgba(255, 255, 255, 0.12);   /* glass fills / badge bg */
  --alpha-white-24:  rgba(255, 255, 255, 0.24);
  --alpha-white-06:  rgba(255, 255, 255, 0.06);
  --alpha-white-04:  rgba(255, 255, 255, 0.04);   /* grid lines */
  --alpha-black-25:  rgba(0, 0, 0, 0.25);
  --alpha-black-12:  rgba(0, 0, 0, 0.12);
  --alpha-black-06:  rgba(0, 0, 0, 0.06);
  --alpha-violet-24: rgba(96, 97, 255, 0.24);

  /* ---------- Semantic colors (dark-first) ---------- */
  --bg:              var(--color-ink-0);
  --bg-raised:       var(--color-ink-10);
  --surface:         var(--color-ink-20);
  --surface-2:       var(--color-ink-30);
  --fg:              var(--color-white);
  --fg-1:            var(--color-ink-95);
  --fg-2:            var(--color-ink-80);
  --fg-3:            var(--color-ink-70);
  --fg-muted:        var(--color-ink-50);
  --border:          var(--color-ink-40);
  --border-strong:   var(--color-ink-60);
  --accent:          var(--color-violet);
  --accent-2:        var(--color-cyan);
  --accent-deep:     var(--color-violet-d);
  --ring:            var(--alpha-violet-24);

  /* ---------- Gradients & glass ---------- */
  --grad-hero:       radial-gradient(120% 80% at 20% 0%, rgba(93,94,252,0.35) 0%, rgba(13,13,21,0) 60%),
                     radial-gradient(90% 60% at 100% 100%, rgba(56,215,237,0.18) 0%, rgba(7,7,10,0) 55%);
  --grad-violet:     linear-gradient(135deg, var(--color-violet) 0%, var(--color-violet-d) 100%);
  --glass-bg:        var(--alpha-white-12);
  --glass-blur:      blur(24px);
  --glass-shadow:    inset 0 4px 6px 0 rgba(255,255,255,0.12), 0 40px 40px 0 rgba(0,0,0,0.25);
  --glass-shadow-sm: inset 0 4px 6px 0 rgba(255,255,255,0.12), 0 40px 40px 0 rgba(0,0,0,0.06);

  /* Grid motif (from Clavius Visual frames) — 4% white grid on dark */
  --grid-line-color: var(--alpha-white-04);

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (8pt system; Clavius uses 8/12/16/24/32/40/48/64) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* ---------- Shadow system ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.25);
  --shadow-sm: 0 4px 8px 0 rgba(0,0,0,0.18);
  --shadow-md: 0 12px 24px 0 rgba(0,0,0,0.25);
  --shadow-lg: 0 24px 48px 0 rgba(0,0,0,0.35);
  --shadow-xl: 0 40px 80px 0 rgba(0,0,0,0.45);
  --shadow-glow-violet: 0 0 0 1px rgba(96,97,255,0.4), 0 20px 60px 0 rgba(93,94,252,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---------- Type scale ---------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;      /* h3 */
  --text-3xl: 40px;      /* h2 */
  --text-4xl: 56px;
  --text-5xl: 80px;      /* h1 */
  --text-6xl: 128px;     /* display */
  --text-7xl: 193px;     /* hero display (Clavius uses this) */

  --leading-tight: 1.0;
  --leading-snug: 1.15;
  --leading-normal: 1.4;
  --leading-loose: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
}

/* ---------- Semantic element defaults ---------- */
html { color-scheme: dark; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-7xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0;
}
p { margin: 0; color: var(--fg-1); line-height: var(--leading-normal); }
small, .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ---------- Utility ---------- */
.bg-grid {
  background-image:
    linear-gradient(var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 160px 160px;
}
.capsule {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow-sm);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
}
.capsule--solid {
  background: var(--surface-2);
  border: 2px solid var(--border-strong);
  backdrop-filter: none;
  box-shadow: none;
  color: var(--color-ink-80);
}