/* ==========================================================================
   PLAY NEW - Design Tokens
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Colors
     ------------------------------------------------------------------------- */

  /* Background */
  --color-bg: #FFFFFF;
  --color-bg-alt: rgba(0, 0, 0, 0.03);
  --color-bg-dark: #1A1A1A;

  /* Text - black with opacity */
  --color-text: rgba(0, 0, 0, 0.9);
  --color-text-muted: rgba(0, 0, 0, 0.5);
  --color-text-light: rgba(0, 0, 0, 0.35);
  --color-text-inverse: #FAFAFA;

  /* Accent */
  --color-accent: #FF5733;

  /* Borders */
  --color-border: rgba(0, 0, 0, 0.1);

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */

  /* Font Families */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  /* Font Sizes */
  --scale-base: 1rem;      /* 16px */

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;

  /* Line Heights */
  --leading-normal: 1.5;

  /* -------------------------------------------------------------------------
     Spacing (8px grid)
     ------------------------------------------------------------------------- */

  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* -------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------- */

  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

}