/* ==========================================================================
   Design Tokens v2 — store.bigintbd.com
   Bold SaaS-style system: vivid green accent, colorful pastel category
   chips, near-black CTA/stat bands, geometric display type.
   ========================================================================== */

:root {
  /* ---- Brand: vivid spring green ---- */
  --color-brand-50:  #eafff3;
  --color-brand-100: #d0ffe6;
  --color-brand-300: #6de8a6;
  --color-brand-500: #17c964;
  --color-brand-600: #10a852;
  --color-brand-700: #0b8542;

  --color-ink: #0b0f19;      /* near-black, used for dark bands + headline text */
  --color-ink-elevated: #12151f;

  /* ---- Neutrals (light) ---- */
  --color-bg: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f5f6f8;
  --color-text-primary: #0b0f19;
  --color-text-secondary: #5b6472;
  --color-text-tertiary: #8b93a1;
  --color-border: rgba(11, 15, 25, 0.08);
  --color-border-strong: rgba(11, 15, 25, 0.14);

  /* ---- Category pastel chips (light) ---- */
  --pastel-lavender-bg: #efe9ff; --pastel-lavender-fg: #6d3ff2;
  --pastel-mint-bg:     #d9fbe8; --pastel-mint-fg:     #0f9d58;
  --pastel-peach-bg:    #ffe7d6; --pastel-peach-fg:    #d1590f;
  --pastel-pink-bg:     #ffe3ee; --pastel-pink-fg:     #d61a72;
  --pastel-blue-bg:     #dcecff; --pastel-blue-fg:     #1d5fd6;
  --pastel-yellow-bg:   #fff3cf; --pastel-yellow-fg:   #a06600;

  /* ---- Surfaces / glass ---- */
  --surface-glass-bg: rgba(255, 255, 255, 0.75);
  --surface-glass-border: rgba(11, 15, 25, 0.06);
  --surface-blur: 18px;
  --surface-saturate: 160%;

  /* ---- Semantic ---- */
  --color-success: #17c964;
  --color-danger: #e5484d;
  --color-focus-ring: rgba(23, 201, 100, 0.5);

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 2px rgba(11, 15, 25, 0.05), 0 1px 1px rgba(11, 15, 25, 0.03);
  --shadow-2: 0 10px 28px rgba(11, 15, 25, 0.08), 0 2px 8px rgba(11, 15, 25, 0.05);
  --shadow-3: 0 28px 64px rgba(11, 15, 25, 0.14), 0 8px 20px rgba(11, 15, 25, 0.06);
  --shadow-glow-brand: 0 12px 28px rgba(23, 201, 100, 0.28);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---- Typography ---- */
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 6vw, 4.75rem);
  --fs-h1: clamp(2rem, 4.2vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.25rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --tracking-display: -0.03em;
  --tracking-h1: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-body: -0.005em;
  --tracking-small: 0em;

  --leading-display: 1.05;
  --leading-h1: 1.1;
  --leading-h2: 1.2;
  --leading-body: 1.6;
  --leading-small: 1.5;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-quick: cubic-bezier(0.25, 0.8, 0.5, 1);

  --duration-fast: 120ms;
  --duration-base: 300ms;
  --duration-slow: 450ms;
  --duration-reveal: 600ms;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --nav-height: 76px;
}

/* ---- Dark theme ---- */
[data-theme="dark"] {
  --color-bg: #08090c;
  --color-bg-elevated: #13151b;
  --color-bg-subtle: #0f1116;
  --color-text-primary: #f5f6f8;
  --color-text-secondary: #a3aab5;
  --color-text-tertiary: #767d89;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-ink: #000000;
  --color-ink-elevated: #0c0d10;

  /* Pastel chips become tinted-dark, color carried by the foreground only */
  --pastel-lavender-bg: rgba(160, 130, 255, 0.14); --pastel-lavender-fg: #b79bff;
  --pastel-mint-bg:     rgba(23, 201, 100, 0.14);  --pastel-mint-fg:     #4fe197;
  --pastel-peach-bg:    rgba(255, 140, 66, 0.14);  --pastel-peach-fg:    #ffab6b;
  --pastel-pink-bg:     rgba(255, 90, 160, 0.14);  --pastel-pink-fg:     #ff8fc0;
  --pastel-blue-bg:     rgba(70, 140, 255, 0.16);  --pastel-blue-fg:     #85b3ff;
  --pastel-yellow-bg:   rgba(255, 200, 60, 0.14);  --pastel-yellow-fg:   #ffd166;

  --surface-glass-bg: rgba(19, 21, 27, 0.68);
  --surface-glass-border: rgba(255, 255, 255, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 28px 64px rgba(0, 0, 0, 0.55);
  --shadow-glow-brand: 0 12px 32px rgba(23, 201, 100, 0.22);

  --color-focus-ring: rgba(77, 225, 151, 0.55);
}

@media (prefers-contrast: more) {
  :root {
    --surface-glass-bg: var(--color-bg-elevated);
    --surface-blur: 0px;
    --color-border: var(--color-border-strong);
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --surface-glass-bg: var(--color-bg-elevated);
    --surface-blur: 0px;
  }
}