/* ==========================================================================
   XENTRA DESIGN TOKENS
   Brand palette, typography, spacing, shadows, transitions
   Source of truth — all other CSS files import these variables.
   ========================================================================== */

:root {
  /* ── Brand Colors ── */
  --x-lime:            #b6ff00;
  --x-lime-dark:       #98d600;
  --x-lime-bg:         #f7ffd9;

  /* ── Neutral Palette ── */
  --x-black:           #111111;
  --x-charcoal:        #222222;
  --x-gray-900:        #1c1c1c;
  --x-gray-800:        #333333;
  --x-gray-700:        #555555;
  --x-gray-600:        #666666;
  --x-gray-500:        #777777;
  --x-gray-400:        #999999;
  --x-gray-300:        #aeb4c0;
  --x-gray-200:        #cccccc;
  --x-gray-150:        #dedede;
  --x-gray-100:        #ececec;
  --x-gray-75:         #f0f0f0;
  --x-gray-50:         #f5f5f5;
  --x-gray-25:         #f8f9fa;
  --x-gray-bg:         #fafafa;
  --x-white:           #ffffff;

  /* ── Semantic Colors ── */
  --x-danger:          #ff4040;
  --x-promo-yellow:    #ffd83d;
  --x-text:            var(--x-charcoal);
  --x-text-muted:      var(--x-gray-400);
  --x-border:          var(--x-gray-150);

  /* ── Typography ── */
  --x-font:            'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Radius ── */
  --x-radius-xs:       10px;
  --x-radius-sm:       14px;
  --x-radius-md:       16px;
  --x-radius-lg:       18px;
  --x-radius-xl:       22px;
  --x-radius-pill:     100px;

  /* ── Shadows ── */
  --x-shadow-sm:       0 2px 6px rgba(0, 0, 0, 0.05);
  --x-shadow-md:       0 5px 20px rgba(0, 0, 0, 0.08);
  --x-shadow-lg:       0 6px 20px rgba(0, 0, 0, 0.07);
  --x-shadow-xl:       0 10px 30px rgba(0, 0, 0, 0.12);
  --x-shadow-dock:     0 -4px 18px rgba(0, 0, 0, 0.08);
  --x-shadow-btn:      0 4px 18px rgba(0, 0, 0, 0.12);
  --x-shadow-hero:     0 4px 12px rgba(0, 0, 0, 0.08);

  /* ── Transitions ── */
  --x-ease-sheet:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --x-ease-spring:     cubic-bezier(0.16, 1, 0.3, 1);
  --x-duration-fast:   0.15s;
  --x-duration-normal: 0.3s;
  --x-duration-sheet:  0.38s;

  /* ── Layout ── */
  --x-page-max:        480px;
  --x-page-pad:        18px;
  --x-safe-bottom:     env(safe-area-inset-bottom, 0px);
  --x-safe-top:        env(safe-area-inset-top, 0px);

  /* ── Z-Index Scale ── */
  --x-z-base:          1;
  --x-z-sticky:        50;
  --x-z-dock:          1500;
  --x-z-backdrop:      1900;
  --x-z-sheet:         2000;
  --x-z-overlay:       2147483000;
  --x-z-pwa:           999999;
}