/* NeuroOCR Design System — tokens.css
   "Aurora Glass" — dark-first, AI-modern.
   Single source of truth for COLOR + TYPE + GLASS/GLOW variables only.
   Reset, helpers, components and animations live in base.css / components.css.

   Variable names are kept stable from the previous design so existing
   `var(--paper/--ink/--accent/--signal/--rule)` references keep working.
*/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ───────────────────────────────────────────────────────────────────
   LIGHT THEME (default) — frosted-white glass on indigo-tinted paper.
   Accents are deliberately darker than the dark theme for AA contrast.
   ─────────────────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --paper:        #F6F7FE;   /* app background base (near-white, indigo tint) */
  --paper-2:      #FFFFFF;   /* raised surface */
  --paper-3:      #EEF0FB;   /* highest surface / table header */

  /* glass surfaces — sit over the aurora background */
  --glass:        rgba(255, 255, 255, 0.66);
  --glass-2:      rgba(255, 255, 255, 0.50);
  --glass-border: rgba(70, 80, 150, 0.16);
  --glass-blur:   16px;

  /* ink / text */
  --ink:          #14162B;
  --ink-2:        #3A3F60;
  --ink-3:        #5C6390;
  --ink-4:        #8A90B6;

  /* rules / dividers */
  --rule:         rgba(40, 48, 110, 0.13);
  --rule-soft:    rgba(40, 48, 110, 0.06);

  /* accent = violet end of the gradient (darkened for white bg) */
  --accent:       #6D4AFF;
  --accent-soft:  rgba(109, 74, 255, 0.10);

  /* signal = the "extracted" state — teal (darkened cyan for contrast) */
  --signal:       #0E8FA8;
  --signal-soft:  rgba(14, 143, 168, 0.12);

  /* gradient stops */
  --grad-from:    #7C3AED;   /* violet */
  --grad-mid:     #5B53F0;   /* indigo */
  --grad-to:      #0891B2;   /* cyan/teal */
  --gradient:     linear-gradient(120deg, var(--grad-from), var(--grad-mid), var(--grad-to));
  --gradient-soft:linear-gradient(120deg,
                    rgba(124,58,237,0.12),
                    rgba(91,83,240,0.10),
                    rgba(8,145,178,0.12));

  /* glows / shadows */
  --glow-accent:  0 0 30px -10px rgba(109, 74, 255, 0.35);
  --glow-signal:  0 0 24px -8px  rgba(14, 143, 168, 0.30);
  --shadow-card:  0 20px 50px -30px rgba(30, 30, 80, 0.30);
  --shadow-pop:   0 16px 44px rgba(30, 30, 80, 0.18);

  /* status */
  --green:        #0F9D58;
  --amber:        #B45309;
  --red:          #DC2626;

  /* aurora background blob opacities (faint in light) */
  --aurora-1:     rgba(124, 58, 237, 0.10);
  --aurora-2:     rgba(8, 145, 178, 0.10);
  --aurora-3:     rgba(91, 83, 240, 0.08);
}

/* ───────────────────────────────────────────────────────────────────
   DARK THEME — the "designed" Aurora Glass default.
   Deep indigo/navy surfaces, vivid violet→cyan accents, glowing glass.
   ─────────────────────────────────────────────────────────────────── */
html.dark {
  --paper:        #0A0B1A;
  --paper-2:      #11132A;
  --paper-3:      #181B38;

  --glass:        rgba(20, 24, 56, 0.55);
  --glass-2:      rgba(28, 33, 72, 0.45);
  --glass-border: rgba(150, 170, 255, 0.15);
  --glass-blur:   18px;

  --ink:          #EEF1FF;
  --ink-2:        #C3C9EC;
  --ink-3:        #8A91C0;
  --ink-4:        #5A608C;

  --rule:         rgba(150, 170, 255, 0.15);
  --rule-soft:    rgba(150, 170, 255, 0.07);

  --accent:       #8B7BFF;
  --accent-soft:  rgba(139, 123, 255, 0.16);

  --signal:       #34E0E8;
  --signal-soft:  rgba(52, 224, 232, 0.16);

  --grad-from:    #8B5CF6;
  --grad-mid:     #6366F1;
  --grad-to:      #22D3EE;
  --gradient:     linear-gradient(120deg, var(--grad-from), var(--grad-mid), var(--grad-to));
  --gradient-soft:linear-gradient(120deg,
                    rgba(139,92,246,0.20),
                    rgba(99,102,241,0.16),
                    rgba(34,211,238,0.20));

  --glow-accent:  0 0 40px -8px rgba(139, 123, 255, 0.55);
  --glow-signal:  0 0 32px -6px rgba(52, 224, 232, 0.50);
  --shadow-card:  0 24px 60px -28px rgba(0, 0, 0, 0.75);
  --shadow-pop:   0 16px 50px rgba(0, 0, 0, 0.55);

  --green:        #34D399;
  --amber:        #FBBF24;
  --red:          #FB7185;

  --aurora-1:     rgba(139, 92, 246, 0.28);
  --aurora-2:     rgba(34, 211, 238, 0.22);
  --aurora-3:     rgba(99, 102, 241, 0.20);
}