/* ==========================================================================
   PROMPTLENS — DESIGN TOKENS
   Visual language: "optical instrument" — a tool that reads images like
   a scanner/rangefinder, not a soft glowing "AI magic" surface.
   ========================================================================== */

:root {
  /* ---- Color: base surfaces ---- */
  --bg-void:        #0B0E14;   /* deepest background */
  --bg-base:        #10141C;   /* page background */
  --bg-surface:     #141821;   /* card surface */
  --bg-surface-2:   #1A2029;   /* raised surface / hover */
  --bg-inset:       #0D1017;   /* recessed areas, code blocks */

  /* ---- Color: lines & borders ---- */
  --line-hair:      #232A36;   /* hairline borders */
  --line-strong:    #2E3644;   /* emphasized dividers */
  --line-focus:     #C9F31D;   /* focus ring */

  /* ---- Color: text ---- */
  --ink-primary:    #E9ECEF;
  --ink-secondary:  #9BA3B0;
  --ink-tertiary:   #5F6774;
  --ink-on-accent:  #0B0E14;

  /* ---- Color: signature accent (scan-line lime) ---- */
  --accent-scan:       #C9F31D;
  --accent-scan-dim:   #9CBE12;
  --accent-scan-glow:  rgba(201, 243, 29, 0.14);

  /* ---- Color: secondary accent (coin / cost / energy) ---- */
  --accent-coin:       #FF6B4A;
  --accent-coin-dim:   #D9532E;
  --accent-coin-glow:  rgba(255, 107, 74, 0.14);

  /* ---- Color: status ---- */
  --status-success:   #4ADE80;
  --status-warning:   #FBBF24;
  --status-danger:    #F87171;
  --status-info:      #60A5FA;

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

  --fs-display-xl: clamp(2.75rem, 5vw + 1rem, 5rem);
  --fs-display-l:  clamp(2rem, 3vw + 1rem, 3.25rem);
  --fs-display-m:  clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --fs-title:      1.375rem;
  --fs-body-l:     1.0625rem;
  --fs-body:       0.9375rem;
  --fs-caption:    0.8125rem;
  --fs-micro:      0.6875rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  /* ---- Radius: sharp, instrument-like, not soft/bubbly ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-full: 999px;

  /* ---- Shadow / elevation (subtle, cool-toned) ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-glow-scan: 0 0 0 1px rgba(201,243,29,0.25), 0 0 24px rgba(201,243,29,0.12);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --rail-width: 84px;
  --rail-width-expanded: 248px;
  --content-max: 1240px;
  --header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}