/**
 * lynk-tokens.css — Design Tokens cho LynkLee.Com
 * Single source of truth cho toàn bộ màu sắc, font, spacing.
 * Enqueue priority 4 (trước mọi CSS khác của plugin).
 *
 * Cách dùng trong CSS khác:
 *   color: var(--lynk-accent);
 *   background: var(--lynk-accent-emerald);
 */

:root {
  /* ── Neon accent (music player, seekbar, glow) ──────────────── */
  --lynk-neon:              #00F2AD;   /* #00F2AD — mint neon, player controls */
  --lynk-neon-rgb:          0, 242, 173;
  --lynk-neon-glow:         rgba(0, 242, 173, 0.5);
  --lynk-neon-alt:          #00ffb4;   /* hover variant */

  /* ── Emerald / Teal palette ─────────────────────────────────── */
  --lynk-emerald-900:  #064e3b;
  --lynk-emerald-800:  #065f46;
  --lynk-emerald-700:  #047857;
  --lynk-emerald-600:  #059669;   /* primary brand */
  --lynk-teal-600:     #0d9488;   /* secondary brand */
  --lynk-emerald-400:  #34d399;   /* accent highlight */
  --lynk-emerald-300:  #6ee7b7;
  --lynk-teal-300:     #5eead4;
  --lynk-cyan-200:     #a5f3fc;
  --lynk-emerald-200:  #99f6e4;

  /* ── Semantic colour aliases ────────────────────────────────── */
  --lynk-accent:              var(--lynk-emerald-400);     /* #34d399 */
  --lynk-accent-mid:          var(--lynk-emerald-600);     /* #059669 */
  --lynk-accent-deep:         var(--lynk-teal-600);        /* #0d9488 */
  --lynk-accent-dark:         var(--lynk-emerald-800);     /* #065f46 */

  /* Blob colours (opaque base, opacity applied per-use) */
  --lynk-blob-1-color:        5, 150, 105;   /* #059669 → rgba(var(--lynk-blob-1-color), 0.4) */
  --lynk-blob-2-color:        13, 148, 136;  /* #0d9488 */
  --lynk-blob-3-color:        52, 211, 153;  /* #34d399 */

  /* ── Text ────────────────────────────────────────────────────── */
  --lynk-text:                #f7e7ce;
  --lynk-text-muted:          rgba(247, 231, 206, 0.72);
  --lynk-text-faint:          rgba(247, 231, 206, 0.45);
  --lynk-text-on-accent:      #000;           /* text on emerald buttons */

  /* ── Surface / Background ────────────────────────────────────── */
  --lynk-bg:                  #000;
  --lynk-surface:             rgba(0, 0, 0, 0.72);
  --lynk-surface-raised:      rgba(255, 255, 255, 0.04);
  --lynk-glass:               rgba(52, 211, 153, 0.08);
  --lynk-glass-border:        rgba(52, 211, 153, 0.25);

  /* ── Accent alpha helpers (for border / shadow / overlay) ────── */
  --lynk-accent-rgb:          52, 211, 153;   /* usage: rgba(var(--lynk-accent-rgb), 0.3) */
  --lynk-accent-mid-rgb:      5, 150, 105;
  --lynk-accent-deep-rgb:     13, 148, 136;

  /* ── Blur tokens (blob backdrop) ────────────────────────────── */
  --lynk-blur-sm:   60px;
  --lynk-blur-md:   90px;
  --lynk-blur-lg:   120px;

  /* ── Typography ─────────────────────────────────────────────── */
  --lynk-font-body:    "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lynk-font-display: "Plus Jakarta Sans", "Quicksand", system-ui, sans-serif;

  /* ── Spacing / Layout ────────────────────────────────────────── */
  --lynk-header-h:    clamp(4.5rem, 8vh, 5.5rem);  /* navbar height — compact để nội dung thoáng hơn */
  --lynk-radius-sm:   8px;
  --lynk-radius-md:   14px;
  --lynk-radius-lg:   24px;
  --lynk-radius-pill: 999px;

  /* ── Transition ─────────────────────────────────────────────── */
  --lynk-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --lynk-duration-fast:  160ms;
  --lynk-duration:       260ms;
  --lynk-duration-slow:  400ms;
}