/* Kno v3 — Design System (Clean Dark — Arc-inspired) */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces — light cream, clean white */
  --bg-primary: #F9F9F6; --bg-secondary: #FFFFFF; --bg-tertiary: #F0F0EA;
  --bg-card: #FFFFFF; --bg-card-hover: #F9F9F6; --bg-hover: #F0F0EA;
  --bg-input: #FFFFFF; --bg-input-focus: #F0F0EA; --bg-overlay: rgba(0,0,0,0.4);
  --bg-code: #F0F0EA; --bg-surface: #FFFFFF;

  /* Accent — Kno Medium Blue */
  --accent: #1F649B; --accent-hover: #164E7A; --accent-light: #5EACE0;
  --accent-bg: rgba(31,100,155,0.08); --accent-bg-strong: rgba(31,100,155,0.15);

  /* Semantic colors */
  --sage: #4BAE70; --sage-hover: #3A8A58; --sage-bg: rgba(75,174,112,0.1);
  --amber: #F1A039; --amber-hover: #D98926; --amber-bg: rgba(241,160,57,0.1);
  --blue: #5EACE0; --blue-hover: #1F649B; --blue-bg: rgba(94,172,224,0.1);
  --red: #E05E5E; --red-hover: #C94C4C; --red-bg: rgba(224,94,94,0.1);
  --purple: #9B5EE0; --purple-bg: rgba(155,94,224,0.1);

  /* Text — clean dark hierarchy */
  --text-primary: #1F1F24; --text-secondary: #5C5C63; --text-muted: #8E8E96;
  --text-inverse: #FFFFFF; --text-link: #1F649B;

  /* Borders — light subtle */
  --border: #E5E5DF; --border-light: #F0F0EA; --border-focus: #1F649B;
  --border-input: #E5E5DF;

  /* Shadows — soft light shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1); --shadow-xl: 0 20px 50px rgba(0,0,0,0.15);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04); --shadow-card-hover: 0 8px 20px rgba(0,0,0,0.08);
  --shadow-float: 0 12px 40px rgba(0,0,0,0.12);

  /* Radii */
  --radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;
  --radius-xl:20px;--radius-2xl:28px;--radius-full:9999px;

  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --transition-fast:150ms var(--ease);--transition:250ms var(--ease);--transition-slow:400ms var(--ease);

  /* Type */
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;

  /* Spacing */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;

  /* Layout */
  --sidebar-width:260px;--header-height:64px;--max-width:1200px;
  --glow: none;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
img,svg{display:block;max-width:100%}
button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,textarea,select{font-family:var(--font-body);font-size:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:rgba(31,100,155,0.2);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--text-primary)}
.display-xl{font-size:3.5rem;font-weight:800;line-height:1.08;letter-spacing:-0.03em}
.display-lg{font-size:2.75rem;font-weight:800;line-height:1.1;letter-spacing:-0.02em}
.display-md{font-size:2.25rem;font-weight:800;line-height:1.15;letter-spacing:-0.02em}
.display-sm{font-size:1.5rem;font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.text-xl{font-size:1.25rem}.text-lg{font-size:1.1rem}.text-sm{font-size:0.875rem}.text-xs{font-size:0.75rem}
.font-display{font-family:var(--font-display)}.font-mono{font-family:var(--font-mono)}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.italic{font-style:italic}
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-6)}
.text-center{text-align:center}
.text-accent{color:var(--accent)}.text-sage{color:var(--sage)}.text-amber{color:var(--amber)}.text-blue{color:var(--blue)}.text-red{color:var(--red)}
.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}
.w-full{width:100%}.hidden{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.gradient-text{background:linear-gradient(135deg,var(--accent),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-4px);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes glow{0%,100%{box-shadow:0 0 5px rgba(31,100,155,0.05)}50%{box-shadow:0 0 20px rgba(31,100,155,0.15)}}
@keyframes floatUp{0%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-80px) scale(1.3)}}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal.delay-1{transition-delay:0.1s}.reveal.delay-2{transition-delay:0.2s}
.reveal.delay-3{transition-delay:0.3s}.reveal.delay-4{transition-delay:0.4s}
.page-enter{animation:fadeInUp 0.35s var(--ease) forwards}
.animate-in{animation:fadeInUp 0.35s var(--ease) forwards}
.animate-pop{animation:scaleIn 0.3s var(--ease-bounce)}
.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-hover) 50%,var(--bg-tertiary) 75%);background-size:400% 100%;animation:shimmer 1.5s ease infinite;border-radius:var(--radius-sm)}