/* ==========================================================================
   Design Tokens — ZIAF POS SaaS Design System
   Luxury Blue + Cyan + Purple palette, light/dark theme variables
   ========================================================================== */

:root {
  /* ---- Brand colors ---- */
  --color-blue: #2f5bff;
  --color-blue-dark: #1a3fd6;
  --color-cyan: #06d6e8;
  --color-purple: #8b5cf6;
  --color-purple-dark: #6d28d9;
  --color-pink: #ec4899;

  /* ---- Core gradients ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 55%, var(--color-cyan) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 55%, var(--color-cyan) 100%);
  --gradient-radial: radial-gradient(circle at 20% 20%, rgba(47, 91, 255, 0.35), transparent 60%),
    radial-gradient(circle at 80% 30%, rgba(139, 92, 246, 0.3), transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(6, 214, 232, 0.25), transparent 60%);
  --gradient-text: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 50%, #06d6e8 100%);
  --gradient-cta: linear-gradient(135deg, #1a3fd6 0%, #6d28d9 100%);

  /* ---- Neutral scale ---- */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #060a14;

  /* ---- Semantic (light theme defaults) ---- */
  --bg-body: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-alt: var(--gray-50);
  --bg-glass: rgba(255, 255, 255, 0.65);
  --bg-glass-strong: rgba(255, 255, 255, 0.85);
  --border-glass: rgba(15, 23, 42, 0.08);
  --border-color: var(--gray-200);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-inverse: #ffffff;

  --nav-bg-scrolled: rgba(255, 255, 255, 0.75);
  --card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -12px rgba(15, 23, 42, 0.12);
  --card-shadow-hover: 0 8px 16px rgba(15, 23, 42, 0.06), 0 30px 60px -20px rgba(47, 91, 255, 0.25);
  --glow-blue: 0 0 0 1px rgba(47, 91, 255, 0.12), 0 20px 40px -12px rgba(47, 91, 255, 0.35);

  /* ---- Status colors ---- */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: var(--color-cyan);

  /* ---- Typography ---- */
  --font-heading: "Poppins", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --fs-display: clamp(2.75rem, 5vw + 1rem, 4.75rem);
  --fs-h1: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.85rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.4rem, 1.2vw + 1rem, 1.85rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  /* ---- Spacing / radius / motion ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --section-py: clamp(4rem, 8vw, 7.5rem);
  --container-max: 1280px;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.2s var(--ease-out-quart);
  --transition-base: 0.35s var(--ease-out-quart);
  --transition-slow: 0.6s var(--ease-smooth);

  --navbar-height: 84px;
  --z-navbar: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-loader: 2000;
}

/* ---- Dark theme overrides ---- */
[data-theme="dark"] {
  --bg-body: #06070f;
  --bg-surface: #0b0f1d;
  --bg-surface-alt: #0e1324;
  --bg-glass: rgba(15, 19, 36, 0.55);
  --bg-glass-strong: rgba(15, 19, 36, 0.85);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-color: rgba(255, 255, 255, 0.08);

  --text-primary: #f1f5f9;
  --text-secondary: #b7c0d4;
  --text-muted: #7c86a3;
  --text-inverse: #0b0f1d;

  --nav-bg-scrolled: rgba(6, 7, 15, 0.7);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 45px -18px rgba(0, 0, 0, 0.7);
  --card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.4), 0 35px 70px -25px rgba(47, 91, 255, 0.45);
  --glow-blue: 0 0 0 1px rgba(47, 91, 255, 0.25), 0 25px 55px -12px rgba(139, 92, 246, 0.55);
}