/* Vedika Intelligence API — Redesign System */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;900&family=Fragment+Mono:wght@400&family=Nanum+Myeongjo:wght@400&family=Plus+Jakarta+Sans:wght@700&family=Sintony:wght@400&display=swap');

:root {
  /* Color Palette */
  --primary-purple: #7C3AED; /* Violet-600 */
  --primary-dark: #5B21B6;   /* Violet-800 */
  --primary-light: #A78BFA;  /* Violet-400 */

  --accent-pink: #EC4899;    /* Pink-500 */
  --accent-orange: #F97316;  /* Orange-500 */
  --success-green: #10B981;  /* Emerald-500 */
  --warning-yellow: #F59E0B; /* Amber-500 */
  --error-red: #EF4444;      /* Red-500 */

  --bg: #FAFAFA;             /* Gray-50 */
  --surface: #FFFFFF;        /* White */
  --text-primary: #111827;   /* Gray-900 */
  --text-secondary: #6B7280; /* Gray-500 */
  --border: #E5E7EB;         /* Gray-200 */
  --dark-bg: #0F172A;        /* Slate-900 */

  /* Gradients */
  --hero-gradient: linear-gradient(135deg, var(--primary-purple) 0%, var(--accent-pink) 100%);
  --card-gradient: linear-gradient(135deg, var(--primary-light) 0%, #F9A8D4 100%);
  --glass-bg: rgba(255,255,255,0.1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 30px rgba(124,58,237,0.3);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* Base Typography */
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: var(--text-primary);
  background: var(--bg);
}

h1, h2, h3, h4, h5 { font-weight: 900; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 700; }
h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 700; }
p  { font-weight: 500; color: var(--text-secondary); }
small { font-size: 0.875rem; }

.font-hero { font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif; font-weight: 700; }
.font-code { font-family: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight: 400; }
.font-decor { font-family: 'Nanum Myeongjo', serif; }
.font-label { font-family: 'Sintony', 'DM Sans', sans-serif; }

/* Gradients & Backgrounds */
.bg-hero-gradient { background: var(--hero-gradient); }
.text-gradient { background: var(--hero-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Components */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.75rem 2rem; border-radius: var(--radius-md); transition: transform .3s, box-shadow .3s, background .3s, color .3s; font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif; font-weight:700; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,58,237,0.25); }
.btn-primary { background: var(--hero-gradient); color: #fff; box-shadow: var(--shadow-md); }
.btn-primary:hover { transform: scale(1.02); box-shadow: var(--shadow-glow); }
.btn-secondary { background:#fff; border:2px solid var(--primary-purple); color: var(--primary-purple); }
.btn-secondary:hover { background: var(--primary-purple); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary-purple); }
.btn-ghost:hover { background: rgba(124,58,237,0.1); }

.input { background:#fff; border:2px solid var(--border); border-radius: var(--radius-md); padding:0.75rem 1rem; font-weight:500; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--primary-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.1); outline: none; }

.card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 2rem; transition: transform .3s, box-shadow .3s, border-color .3s; border:1px solid rgba(17,24,39,0.04); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.glass { background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.2); }
.ring-focus { box-shadow: 0 0 0 3px rgba(124,58,237,0.3); }

/* Badges */
.badge { border-radius: var(--radius-full); padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 600; }
.badge.success { background:#D1FAE5; color:#065F46; }
.badge.warning { background:#FEF3C7; color:#92400E; }
.badge.error { background:#FEE2E2; color:#991B1B; }
.badge.info { background:#DBEAFE; color:#1E40AF; }

/* Pricing accents */
.popular { position: relative; border-color: var(--primary-purple) !important; box-shadow: var(--shadow-glow); }
.popular .popular-tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: var(--primary-purple); color:#fff; padding:0.25rem 0.75rem; border-radius: var(--radius-full); font-size:.75rem; font-weight:700; }

/* Tables */
table.data-table thead th { font-weight:700; color:#111827; }
table.data-table tbody tr:hover { background: rgba(124,58,237,0.05); }

/* Code blocks */
.codeblock { background:#1E293B; color:#E2E8F0; border-radius: var(--radius-lg); position: relative; }
.codeblock .copy-btn { position:absolute; top:.5rem; right:.5rem; opacity:0; transition: opacity .2s; }
.codeblock:hover .copy-btn { opacity:1; }
.codeblock code, .codeblock pre { font-family: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-weight:400; }

/* Layout helpers */
.container-12 { max-width: 1280px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.sidebar { width: 250px; }
.sidebar-300 { width: 300px; }

/* Animations */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(20px); opacity:0 } to { transform: translateY(0); opacity:1 } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.fade-in { animation: fadeIn .5s ease-in both; }
.slide-up { animation: slideUp .6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.stagger > * { opacity:0; animation: fadeIn .6s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: .1s }
.stagger > *:nth-child(2) { animation-delay: .2s }
.stagger > *:nth-child(3) { animation-delay: .3s }
.stagger > *:nth-child(4) { animation-delay: .4s }
.stagger > *:nth-child(5) { animation-delay: .5s }

/* Hover scale */
.hover-scale { transition: transform .3s, box-shadow .3s; }
.hover-scale:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }

/* Gradient borders (on hover) */
.gradient-border { position: relative; }
.gradient-border::before { content:""; position:absolute; inset:-1px; border-radius: inherit; padding:1px; background: linear-gradient(135deg, var(--primary-light), #F9A8D4); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:0; transition: opacity .3s; }
.gradient-border:hover::before { opacity:1; }

/* Scroll progress bar (optional) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--hero-gradient); z-index: 60; box-shadow: var(--shadow-glow); }

/* Ripple utility for buttons */
.ripple { position: relative; overflow: hidden; }
.ripple:after { content:""; position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,0.4); width: 100px; height: 100px; opacity: 1; pointer-events: none; animation: ripple 600ms linear; display:none; }
.ripple:active:after { display:block; left: var(--x, 50%); top: var(--y, 50%); transform: translate(-50%, -50%) scale(0); }

/* Utility */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; clip-path: inset(50%); border: 0; padding: 0; margin: -1px; }

/* Toast notifications */
.toast-container { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; flex-direction: column; gap: .5rem; }
.toast { background: #111827; color: #F9FAFB; border-radius: 10px; box-shadow: var(--shadow-lg); padding: .75rem 1rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Tooltips */
.tooltip { position: relative; display: inline-block; }
.tooltip .tooltip-bubble { position: absolute; left: 50%; top: -40px; transform: translateX(-50%) translateY(4px); background: #111827; color: #F9FAFB; border-radius: 8px; padding: .4rem .6rem; font-size: 12px; white-space: nowrap; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.tooltip .tooltip-bubble::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-style: solid; border-color: #111827 transparent transparent transparent; }
.tooltip:hover .tooltip-bubble, .tooltip:focus-within .tooltip-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Responsive adjustments */
@media (min-width: 640px) {}
@media (min-width: 768px) {}
@media (min-width: 1024px) {}
@media (min-width: 1280px) {}
@media (min-width: 1536px) {}

/* Loading skeletons */
.skeleton { background: linear-gradient(90deg, #f4f4f5 25%, #e9e9eb 37%, #f4f4f5 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: 8px; }
.skeleton.text { height: 1rem; }
.skeleton.title { height: 1.5rem; }
@keyframes skeleton { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

/* Status chip for methods */
.http-badge { font-size: .75rem; font-weight: 700; padding: .25rem .5rem; border-radius: .5rem; }
.http-get { background:#D1FAE5; color:#065F46; }
.http-post { background:#DBEAFE; color:#1E40AF; }
.http-delete { background:#FEE2E2; color:#991B1B; }

/* Top bar shadow */
.topbar { background:#fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }

/* Mobile drawer navigation */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 40; }
.drawer-backdrop.show { opacity: 1; visibility: visible; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: 18rem; background: #fff; box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform .25s ease; z-index: 50; padding: 1rem; overflow-y: auto; }
.drawer.show { transform: translateX(0); }

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Horizontal tab scroller */
.tabs-scroll { display: flex; gap: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.tabs-scroll::-webkit-scrollbar { height: 6px; }
.tabs-scroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 9999px; }