/* Drawer Index — catalog tokens (Appily Ninetyeight) */
:root {
  --di-ink: #1A2230;
  --di-cabinet: #243040;
  --di-field: #EEF6FF;
  --di-field-mint: #E6FFF4;
  --di-surface: #FFFFFF;
  --di-rose: #C41E4A;
  --di-rose-deep: #A0183C;
  --di-cyan: #00C8E0;
  --di-cyan-deep: #007A8C;
  --di-brass: #E8A820;
  --di-brass-deep: #8A6400;
  --di-mute: #3D4F5C;
  --di-display: "Archivo Black", Impact, sans-serif;
  --di-body: "Source Sans 3", system-ui, sans-serif;
  --di-radius: 14px;
  --di-shadow: 0 14px 36px rgba(26, 34, 48, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.a98-drawer {
  margin: 0;
  min-height: 100vh;
  font-family: var(--di-body);
  color: var(--di-ink);
  background:
    radial-gradient(ellipse 70% 45% at 10% 0%, rgba(255, 59, 107, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 8%, rgba(0, 200, 224, 0.14), transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(232, 168, 32, 0.1), transparent 55%),
    linear-gradient(180deg, var(--di-field) 0%, var(--di-field-mint) 52%, #F4FBFF 100%);
  -webkit-font-smoothing: antialiased;
}

.di-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--di-rose);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.di-skip:focus,
.di-skip:focus-visible {
  left: 0.75rem;
  top: 0.75rem;
  outline: 3px solid var(--di-cyan);
  outline-offset: 2px;
}

body.di-nav-open { overflow: hidden; }