/* ==========================================================
   PRIYANSHI STUDIO — Design Tokens
   Theme: darkroom / camera-studio. Signature motif: aperture ring.
   ========================================================== */
:root {
  /* Surfaces */
  --ink:        #10141b;
  --surface:    #1a212b;
  --surface-2:  #222a36;
  --surface-3:  #2b3543;
  --border:     #37414f;
  --paper:      #f6f3ec;

  /* Text */
  --text:       #eef1f5;
  --text-dim:   #97a3b3;
  --text-faint: #667287;

  /* Accents */
  --accent:      #c99a3b;   /* brass / lens ring gold   */
  --accent-hi:   #e3b95a;
  --accent-ink:  #241b06;   /* text-on-accent           */
  --teal:        #4f9284;   /* darkroom safelight green */
  --teal-hi:     #63b0a0;
  --rust:        #c1503f;   /* danger / delete          */
  --rust-hi:     #d76c5b;
  --steel:       #5b83c4;   /* info / links             */

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

  /* Radii / shadow / motion */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.25);
  --shadow-2: 0 12px 32px rgba(0,0,0,.35);
  --ease: cubic-bezier(.22,.68,0,1);
}

* { box-sizing: border-box; }

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---- Signature: aperture ring (spinner / decorative) ---- */
.aperture {
  --n: 8;
  width: 44px; height: 44px;
  position: relative;
  display: inline-block;
}
.aperture i {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--accent);
  animation: aperture-spin 1s linear infinite;
}
.aperture i:nth-child(2) { border-top-color: var(--teal); animation-duration: 1.6s; inset: 6px; opacity: .8; }
@keyframes aperture-spin { to { transform: rotate(360deg); } }

.aperture-badge {
  width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--teal), var(--accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
  flex: none;
}
.aperture-badge span {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: var(--accent-hi);
  font-size: 15px;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up .5s var(--ease) both; }