/* ==========================================================================
   PDFLite.dev — Design Tokens & Base Styles
   Palette locked per design.md: dark-first, electric cyan primary,
   fresh-green accent, no classic "PDF red".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  /* Color tokens */
  --bg: #0A0E14;
  --bg-elevated: #0D1219;
  --surface: #131A24;
  --surface-hover: #182130;
  --border: #232B38;
  --border-strong: #2E3948;

  --text: #E7EDF5;
  --text-muted: #8B98A8;
  --text-faint: #5B6675;

  --primary: #22D3EE;      /* electric cyan */
  --primary-strong: #67E8F9;
  --primary-ink: #06232A;  /* text on primary */

  --accent: #34D399;       /* fresh green */
  --accent-strong: #6EE7B7;

  --danger: #F87171;
  --warning: #FBBF24;

  /* Radius tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  /* Space tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  background: var(--bg);
  background-image:
    radial-gradient(60vw 40vh at 85% -10%, rgba(34,211,238,0.10), transparent 60%),
    radial-gradient(50vw 35vh at -10% 15%, rgba(52,211,153,0.07), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.font-display{ font-family: var(--font-display); letter-spacing: -0.01em; }
.font-mono{ font-family: var(--font-mono); }

::selection{ background: rgba(34,211,238,0.25); color: var(--text); }

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--text-faint); }

/* Focus visibility (accessibility rule) */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, label:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------------- Components ---------------- */

.surface{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.surface-flat{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .75rem 1.35rem; border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary{
  background: linear-gradient(180deg, var(--primary-strong), var(--primary));
  color: var(--primary-ink);
  box-shadow: 0 8px 24px -8px rgba(34,211,238,.55);
}
.btn-primary:hover:not(:disabled){ box-shadow: 0 10px 30px -6px rgba(34,211,238,.7); }

.btn-secondary{
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled){ background: var(--surface-hover); border-color: var(--primary); }

.btn-ghost{
  background: transparent; color: var(--text-muted); padding: .6rem 1rem;
}
.btn-ghost:hover{ color: var(--text); background: var(--surface); }

.chip{
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--border-strong); color: var(--text-muted);
}
.chip-dot{ width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.chip-live .chip-dot{ animation: pulse-dot 2.2s ease-in-out infinite; }

@keyframes pulse-dot{
  0%,100%{ box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
  50%{ box-shadow: 0 0 0 6px rgba(52,211,153,.10); }
}

.privacy-banner{
  display:flex; align-items:flex-start; gap: .85rem;
  background: linear-gradient(135deg, rgba(52,211,153,0.09), rgba(34,211,238,0.06));
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.tool-card{
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color .18s ease, background .18s ease;
  overflow: hidden;
}
.tool-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: linear-gradient(135deg, rgba(34,211,238,0), rgba(34,211,238,0));
  transition: background .25s ease;
  pointer-events:none;
}
.tool-card:hover{ border-color: var(--border-strong); background: var(--surface-hover); }
.tool-card:hover .tool-card-arrow{ transform: translate(3px,-3px); opacity:1; }

.tool-card-icon{
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--primary);
}

.tool-card-arrow{ transition: transform .18s ease, opacity .18s ease; opacity: .55; }

.dropzone{
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.is-dragover{
  border-color: var(--primary);
  background: rgba(34,211,238,0.06);
}

.progress-track{
  width: 100%; height: 8px; border-radius: 999px; background: var(--bg-elevated);
  border: 1px solid var(--border); overflow: hidden;
}
.progress-fill{
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width .25s ease;
}

.file-row{
  display:flex; align-items:center; gap: var(--space-3);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}

.thumb{
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg-elevated); position: relative;
  cursor: pointer; user-select: none;
}
.thumb.selected{ outline: 2px solid var(--danger); outline-offset: -2px; }
.thumb.selected .thumb-mark{ opacity: 1; transform: scale(1); }
.thumb-mark{
  position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:999px;
  background: var(--danger); color:#1a0505; display:flex; align-items:center; justify-content:center;
  font-size: .75rem; font-weight:700; opacity:0; transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}

.step-num{
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  color: var(--primary); font-family: var(--font-mono); font-size: .8rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.nav-link{
  color: var(--text-muted); font-weight: 500; font-size: .93rem;
  transition: color .15s ease;
}
.nav-link:hover{ color: var(--text); }

.footer-link{ color: var(--text-muted); font-size:.9rem; }
.footer-link:hover{ color: var(--primary); }

.skip-link{
  position:absolute; left:-999px; top:0; background: var(--primary); color: var(--primary-ink);
  padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 100; font-weight:600;
}
.skip-link:focus{ left:0; }

.mono-badge{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .01em;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background: var(--bg-elevated); border:1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:999px;
  background: var(--primary); cursor:pointer; border:3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--primary);
}

select, input[type="text"], input[type="password"], input[type="number"]{
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: .55rem .8rem; font-size: .92rem;
}

.hero-orbit{ animation: orbit 22s linear infinite; transform-origin: center; }
@keyframes orbit{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@media (prefers-reduced-motion: reduce){ .hero-orbit{ animation: none; } }

.reveal-once{ animation: reveal .7s cubic-bezier(.16,1,.3,1) both; }
@keyframes reveal{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none;} }

.marquee-track{ display:flex; gap: 2.5rem; animation: marquee 28s linear infinite; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; flex-wrap: wrap; } }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }