/* ============================================================
   VirtueleWereld — Design Tokens
   All CSS custom properties. Never hardcode these values.
   ============================================================ */

:root {

  /* Colors */
  --color-bg:            #000000;
  --color-bg-card:       #101010;
  --color-bg-feature:    #161616;
  --color-text:          #fefefe;
  --color-text-dim:      rgba(254, 254, 254, 0.65);
  --color-text-muted:    rgba(232, 230, 212, 0.35);
  --color-accent:        #13D688;
  --color-accent-dim:    rgba(19, 214, 136, 0.15);
  --color-border:        rgba(232, 230, 212, 0.07);

  /* Light section (FAQ only) */
  --color-bg-light:      #FFFDFA;
  --color-text-dark:     #101010;
  --color-text-dark-dim: rgba(16, 16, 16, 0.65);
  --color-border-dark:   rgba(16, 16, 16, 0.12);

  /* Typography */
  --font-sans:  'Almarai', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;
  --fw-black:   800;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* Border radius */
  --radius-sm:   0.75rem;
  --radius-md:   1.25rem;
  --radius-lg:   2rem;
  --radius-full: 9999px;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.22, 1, 0.36, 1);

}