/* ZoomApps 2026 v2 — Design Tokens (UnifiedInfotech-grade) */
:root {
  /* === Foundation === */
  --bg-page:        #FFFFFF;
  --bg-soft:        #FAFAFA;
  --bg-elevated:    #FFFFFF;
  --bg-dark:        #0A0A0A;
  --bg-dark-2:      #141414;
  --bg-dark-3:      #1F1F1F;

  /* === Text === */
  --text-primary:   #0A0A0A;
  --text-secondary: #525252;
  --text-tertiary:  #8C8C8C;
  --text-quaternary:#A8A8A8;
  --text-on-dark:   #FFFFFF;
  --text-on-dark-2: #B8B8B8;
  --text-on-dark-3: #6B6B6B;

  /* === Accent (точечно, не ковёр) === */
  --accent:         #6366F1;
  --accent-hover:   #5558E0;
  --accent-2:       #8B5CF6;
  --accent-glow:    rgba(99, 102, 241, 0.12);
  --accent-glow-strong: rgba(99, 102, 241, 0.25);
  --accent-tint:    rgba(99, 102, 241, 0.06);

  /* === Stone scale (vs hard black) === */
  --stone-50:       #FAFAF9;
  --stone-100:      #F5F5F4;
  --stone-200:      #E7E5E4;
  --stone-300:      #D6D3D1;
  --stone-400:      #A8A29E;
  --stone-500:      #78716C;
  --stone-600:      #57534E;
  --stone-700:      #44403C;
  --stone-800:      #292524;
  --stone-900:      #1C1917;

  /* === Borders === */
  --border:         #E5E5E5;
  --border-strong:  #C9C9C9;
  --border-dark:    #2A2A2A;
  --border-dark-strong: #3D3D3D;

  /* === Status === */
  --success:        #10B981;
  --warning:        #F59E0B;
  --error:          #EF4444;
  --info:           #3B82F6;

  /* === Gradients (subtle, not dominant) === */
  --grad-text:      linear-gradient(135deg, #0A0A0A 0%, #6366F1 100%);
  --grad-accent:    linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --grad-mesh:      radial-gradient(at 20% 0%, rgba(99,102,241,0.10) 0%, transparent 50%),
                    radial-gradient(at 80% 100%, rgba(139,92,246,0.08) 0%, transparent 50%);
  --grad-dark-mesh: radial-gradient(at 20% 0%, rgba(99,102,241,0.20) 0%, transparent 50%),
                    radial-gradient(at 80% 100%, rgba(139,92,246,0.15) 0%, transparent 50%);

  /* === Typography === */
  --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, monospace;

  /* Modular scale 1.333 (perfect fourth) */
  --fs-3xs:         11px;
  --fs-2xs:         12px;
  --fs-xs:          13px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          21px;
  --fs-xl:          24px;
  --fs-2xl:         28px;
  --fs-3xl:         37px;
  --fs-4xl:         49px;
  --fs-5xl:         65px;
  --fs-6xl:         87px;
  --fs-7xl:         116px;
  --fs-8xl:         154px;

  /* Line heights */
  --lh-tight:       1.0;
  --lh-snug:        1.1;
  --lh-comfortable: 1.25;
  --lh-normal:      1.5;
  --lh-relaxed:     1.6;
  --lh-loose:       1.75;

  /* Letter spacing */
  --ls-tightest:    -0.04em;
  --ls-tighter:     -0.03em;
  --ls-tight:       -0.02em;
  --ls-snug:        -0.01em;
  --ls-normal:      0;
  --ls-wide:        0.04em;
  --ls-wider:       0.08em;
  --ls-widest:      0.16em;

  /* Weights */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* === Spacing (4-base) === */
  --sp-0:           0;
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-8:           32px;
  --sp-10:          40px;
  --sp-12:          48px;
  --sp-14:          56px;
  --sp-16:          64px;
  --sp-20:          80px;
  --sp-24:          96px;
  --sp-32:          128px;
  --sp-40:          160px;
  --sp-48:          192px;
  --sp-56:          224px;
  --sp-64:          256px;

  /* Semantic spacing */
  --space-section-y: clamp(64px, 12vw, 160px);
  --space-block:     clamp(40px, 6vw, 96px);
  --space-paragraph: 24px;

  /* === Radius === */
  --r-none:         0;
  --r-xs:           4px;
  --r-sm:           8px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-xl:           24px;
  --r-2xl:          32px;
  --r-3xl:          48px;
  --r-full:         999px;

  /* === Shadows (soft, premium) === */
  --sh-xs:          0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-sm:          0 2px 4px rgba(10, 10, 10, 0.04), 0 1px 2px rgba(10, 10, 10, 0.04);
  --sh-md:          0 4px 12px rgba(10, 10, 10, 0.06), 0 2px 4px rgba(10, 10, 10, 0.04);
  --sh-lg:          0 12px 32px rgba(10, 10, 10, 0.08), 0 4px 8px rgba(10, 10, 10, 0.04);
  --sh-xl:          0 24px 64px rgba(10, 10, 10, 0.12), 0 8px 16px rgba(10, 10, 10, 0.06);
  --sh-2xl:         0 40px 96px rgba(10, 10, 10, 0.16), 0 16px 32px rgba(10, 10, 10, 0.08);
  --sh-inner:       inset 0 1px 2px rgba(10, 10, 10, 0.06);
  --sh-accent:      0 8px 24px rgba(99, 102, 241, 0.20);
  --sh-accent-strong: 0 16px 48px rgba(99, 102, 241, 0.32);

  /* === Container / layout === */
  --container-max:  1440px;
  --container-px:   clamp(20px, 4vw, 48px);
  --content-max:    1280px;
  --reading-max:    72ch;

  /* === Motion === */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:        cubic-bezier(0.45, 0, 0.55, 1);
  --ease-in-out-quart:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-back:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:        cubic-bezier(0.5, 1.5, 0.5, 1);

  --d-instant:      100ms;
  --d-fast:         200ms;
  --d-base:         400ms;
  --d-slow:         700ms;
  --d-slower:       1200ms;
  --d-marquee:      40s;

  /* === Z-index === */
  --z-base:         1;
  --z-raised:       10;
  --z-dropdown:     20;
  --z-sticky:       30;
  --z-overlay:      80;
  --z-modal:        100;
  --z-toast:        200;
  --z-cursor:       9999;

  /* === Mobile === */
  --touch-min:      48px;

  /* === Glass === */
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-bg-dark:  rgba(10, 10, 10, 0.72);
  --glass-blur:     blur(24px) saturate(180%);
  --glass-border:   1px solid rgba(255, 255, 255, 0.12);
}

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