/* Clippyprom - design tokens v2. Near-black, iridescent, bento. Single source of truth. */

:root{
  /* ---- Base (monochrome sophistication) ---- */
  --ink:    #0A0A0C;   /* near-black page base           */
  --ink-2:  #060608;   /* deepest pockets / footer       */
  --coal:   #141418;   /* matte bento card surface       */
  --coal-2: #1B1C22;   /* raised / hover surface         */
  --line:   rgba(255,255,255,.08);  /* hairline border   */
  --line-2: rgba(255,255,255,.14);  /* stronger border   */

  /* ---- Text ---- */
  --text:   #F4F5F7;
  --muted:  #9EA0AB;
  --faint:  #5C5E68;

  /* ---- One restrained accent ---- */
  --mint:   #2FF3C6;
  --mint-lo:#12C79E;

  /* ---- Iridescence (reserved for 3D objects + thin edge lights ONLY) ---- */
  --i-pink:   #FF5CA8;
  --i-violet: #A76BFF;
  --i-blue:   #5B8CFF;
  --i-mint:   #2FF3C6;
  --i-amber:  #FFD37A;
  --irid: conic-gradient(from 200deg, var(--i-pink), var(--i-violet), var(--i-blue), var(--i-mint), var(--i-amber), var(--i-pink));
  --irid-lin: linear-gradient(120deg, var(--i-violet), var(--i-blue) 40%, var(--i-mint) 72%, var(--i-amber));

  /* ---- State colors (kept for app surfaces) ---- */
  --st-pending: #F5B94A;
  --st-settled: var(--mint);
  --st-paid:    #57E39A;
  --st-eligible:var(--i-blue);
  --st-locked:  #6A6C78;
  --st-rejected:#FF6B8A;

  /* ---- Type ---- */
  --f-body: 'Onest', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* fluid scale - refined, not shouty */
  --t-hero: clamp(2.8rem, 6vw, 5.4rem);
  --t-h1:   clamp(2.2rem, 4vw, 3.4rem);
  --t-h2:   clamp(1.7rem, 2.8vw, 2.4rem);
  --t-h3:   clamp(1.2rem, 1.7vw, 1.5rem);
  --t-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --t-body: 1rem;
  --t-sm:   .9rem;
  --t-xs:   .78rem;
  --t-eye:  .74rem;

  /* ---- Spacing (8pt) ---- */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem; --s-6:4.5rem; --s-7:6.5rem; --s-8:9rem;

  /* ---- Radius (soft, generous - bento language) ---- */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:30px; --r-pill:999px;

  /* ---- Elevation ---- */
  --sh-card: 0 30px 80px -40px rgba(0,0,0,.9);
  --glow-mint: 0 0 40px -8px rgba(47,243,198,.4);

  /* ---- Motion (slow, premium) ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --shell: 1200px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}