/* =========================================================
   StarQR — variables.css
   Design Tokens — Single source of truth for all visual
   properties. Change a value here → reflected everywhere.
   ========================================================= */

/* ── DESIGN TOKENS ────────────────────────────────────── */
:root {
  /* ─── Color Palette ─── */
  --bg:              #F5F7FB;           /* Page background              */
  --card:            rgba(255, 255, 255, 0.88); /* Glassmorphism card bg  */
  --card-solid:      #ffffff;           /* Opaque card background        */
  --border:          #E5EAF2;           /* Default border color          */
  --border-focus:    #4F46E5;           /* Input focus border            */

  --primary:         #4F46E5;           /* Brand indigo                  */
  --primary-dark:    #4338CA;           /* Hover state                   */
  --primary-light:   rgba(79, 70, 229, 0.08);  /* Light tint bg        */
  --primary-glow:    rgba(79, 70, 229, 0.18);  /* Focus ring glow      */

  --accent:          #06B6D4;           /* Cyan accent                   */
  --accent-light:    rgba(6, 182, 212, 0.10);

  --text-primary:    #111827;           /* Main body text                */
  --text-secondary:  #6B7280;           /* Subdued text                  */
  --text-muted:      #9CA3AF;           /* Placeholder / disabled        */

  --error:           #EF4444;           /* Error / destructive           */
  --error-light:     rgba(239, 68, 68, 0.08);
  --success:         #10B981;           /* Success / confirmation        */
  --success-light:   rgba(16, 185, 129, 0.10);
  --danger:          #F87171;           /* Warning / clear action        */
  --danger-light:    rgba(248, 113, 113, 0.10);

  /* ─── Elevation (Shadows) ─── */
  --shadow-xs:    0 1px 4px rgba(17, 24, 39, 0.06);
  --shadow-sm:    0 2px 8px rgba(17, 24, 39, 0.08);
  --shadow-md:    0 4px 20px rgba(79, 70, 229, 0.10);
  --shadow-lg:    0 8px 32px rgba(79, 70, 229, 0.14);
  --shadow-glow:  0 0 0 4px var(--primary-glow);

  /* ─── Spacing (8pt Grid System) ─── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;

  /* ─── Border Radius ─── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ─── Typography ─── */
  --font:         'Plus Jakarta Sans', system-ui, sans-serif;
  --text-xs:      12px;
  --text-sm:      13px;
  --text-base:    15px;
  --text-md:      16px;
  --text-lg:      20px;
  --text-xl:      24px;
  --text-2xl:     32px;

  /* ─── Animation Durations & Easings ─── */
  --dur-fast:     120ms;
  --dur-normal:   180ms;
  --dur-slow:     220ms;
  --dur-xslow:    300ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);    /* Smooth decelerate */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot bounce  */
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);        /* Accelerate        */
  --ease-soft:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
}