/* ============================================================
   NELVIEW — Design Tokens
   AI manuscript verification platform · dark-first system
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  /* ---- Brand core ---- */
  --ink:        #000000;   /* brand black — base canvas */
  --green:      #1BB35C;   /* primary action / accept / publication-ready */
  --red:        #D6313C;   /* reject / critical / danger */
  --yellow:     #D4D41B;   /* revision / attention / warning */

  /* tonal ramps of the accents (for fills, glows, tracks) */
  --green-2:    #15803d;
  --green-soft: rgba(27,179,92,0.14);
  --green-line: rgba(27,179,92,0.40);
  --red-soft:   rgba(214,49,60,0.14);
  --red-line:   rgba(214,49,60,0.40);
  --yellow-soft:rgba(212,212,27,0.14);
  --yellow-line:rgba(212,212,27,0.40);

  /* ---- Neutral surfaces (warm-free, pure) ---- */
  --bg:         #000000;
  --surface-1:  #0A0B0C;   /* raised card */
  --surface-2:  #111315;   /* nested / hover */
  --surface-3:  #17191C;   /* input wells, chips */
  --line:       #232629;   /* hairline border */
  --line-2:     #2E3236;   /* stronger border */

  /* ---- Text ---- */
  --text:       #F4F5F6;
  --text-2:     #A7ADB4;   /* secondary */
  --text-3:     #6B7178;   /* muted / captions */

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ---- Radius (brand uses 16px+ rounding) ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- Elevation (subtle, no harsh shadows per brand) ---- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -12px rgba(0,0,0,0.8);
  --shadow-glow-green: 0 0 0 1px var(--green-line), 0 0 40px -8px rgba(27,179,92,0.45);
}

/* ---- LIGHT MODE tokens ---- */
body.light{
  --bg:         #FFFFFF;
  --surface-1:  #FFFFFF;
  --surface-2:  #F4F5F7;
  --surface-3:  #EAECEF;
  --line:       #E0E2E6;
  --line-2:     #CDD0D5;
  --text:       #0D0F10;
  --text-2:     #3D4249;
  --text-3:     #7A8089;
  --green-soft: rgba(27,179,92,0.10);
  --green-line: rgba(27,179,92,0.30);
  --shadow-1: 0 1px 0 rgba(255,255,255,0.8) inset, 0 8px 24px -12px rgba(0,0,0,0.10);
}
body.light .bg-field{
  opacity:1;
  filter:none;
  background-image:radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 50%,transparent 100%);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);}