/* staging-v2/shared/tokens.css
 * Lil Big Web V2 — design tokens
 * Direction: Terminal Editorial × Awwwards execution
 * Status: S1 prototype foundation — production-ready palette/scale
 */

:root {
  /* === COLOR ===
   * Base sombre profond + phosphor green pour accents terminal.
   * Pas de gradient startup. Pas de violet/bleu cliché.
   * Warn orange sparingly (rare highlights, prix concurrents barrés).
   */
  --bg-deep:      #050608;
  --bg-surface:   #0d1015;
  --bg-elevated:  #161a21;
  --bg-overlay:   rgba(13, 16, 21, 0.85);

  --phosphor:     #4ade80;
  --phosphor-dim: #22c55e;
  --phosphor-deep:#15803d;
  --phosphor-glow:rgba(74, 222, 128, 0.35);

  --text-bright:  #f5f5f7;
  --text-mid:     #94a3b8;
  --text-dim:     #4b5563;
  --text-faint:   #1f2937;

  --accent-warn:  #f97316;
  --accent-warn-glow: rgba(249, 115, 22, 0.3);

  --border-faint: rgba(148, 163, 184, 0.08);
  --border-mid:   rgba(148, 163, 184, 0.16);
  --border-bright:rgba(74, 222, 128, 0.35);

  /* === TYPE ===
   * S1 free fallback : Inter (display + body) + JetBrains Mono.
   * Production target : Berkeley Mono (75$ once) + Söhne Body (150$+)
   * — see README upgrade path.
   */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-2xs:     clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem);
  --text-xs:      clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --text-sm:      clamp(0.875rem, 0.83rem + 0.22vw, 0.95rem);
  --text-base:    clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-md:      clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-lg:      clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --text-xl:      clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --text-2xl:     clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-3xl:     clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  --text-display: clamp(4rem, 2rem + 10vw, 11rem);

  /* === SPACING === */
  --space-2xs:    0.25rem;
  --space-xs:     0.5rem;
  --space-sm:     0.75rem;
  --space-md:     1rem;
  --space-lg:     1.5rem;
  --space-xl:     2.5rem;
  --space-2xl:    4rem;
  --space-3xl:    6rem;
  --space-section:clamp(4rem, 3rem + 5vw, 8rem);

  /* === MOTION === */
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     600ms;
  --dur-grand:    1200ms;

  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);

  /* === GEOMETRY === */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-xl:    24px;

  --container-narrow: 720px;
  --container-base:   1100px;
  --container-wide:   1440px;
}

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