/* ==========================================================
   VISTAAR — Design Tokens
   Premium Digital Agency
   ========================================================== */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:            #0a0a0a;
  --color-bg-alt:        #0d0d0c;
  --color-card:          #0f0f0e;
  --color-card-raised:   #111110;
  --color-card-hover:    #141412;
  --color-row-hover:     #101010;

  --color-border:        #1e1e1b;
  --color-border-soft:   #1a1a17;
  --color-border-faint:  #1c1c19;
  --color-border-strong: #2d2d28;
  --color-border-input:  #232320;
  --color-border-btn:    #2a2a26;

  --color-text:          #f2f2ef;
  --color-text-soft:     #cfcfc8;
  --color-text-muted:    #b7b7b0;
  --color-text-dim:      #a3a39c;
  --color-text-faint:    #9c9c95;
  --color-text-subtle:   #8a8a83;
  --color-text-label:    #6d6d66;
  --color-text-ghost:    #4a4a44;
  --color-text-marquee:  #3a3a35;
  --color-nav-link:      #b9b9b2;

  --color-accent:        #c4f249;
  --color-accent-hover:  #d8ff6b;
  --color-accent-line:   rgba(196, 242, 73, 0.4);
  --color-accent-edge:   rgba(196, 242, 73, 0.38);
  --color-accent-ring:   rgba(196, 242, 73, 0.35);
  --color-accent-strong: rgba(196, 242, 73, 0.45);
  --color-accent-nav:    rgba(196, 242, 73, 0.22);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Syne', 'Instrument Sans', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   18px;
  --radius-xl:   20px;
  --radius-2xl:  22px;
  --radius-full: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-nav:          0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-accent-sm:    0 10px 30px rgba(196, 242, 73, 0.35);
  --shadow-accent-md:    0 14px 34px rgba(196, 242, 73, 0.3);
  --shadow-accent-lg:    0 16px 40px rgba(196, 242, 73, 0.32);
  --shadow-accent-card:  0 20px 46px rgba(196, 242, 73, 0.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --container: 1200px;
  --gutter:    32px;
  --z-nav:     100;
}