/* ==========================================================================
   2play Design System — Design Tokens
   Source: ds-foundations (colors, typography, spacing, radius, elevation)
   ========================================================================== */

:root {

  /* ===================================================================
     COLORS — Neutral
     =================================================================== */
  --neutral-100: #F6F6F6;
  --neutral-200: #E5EAF1;
  --neutral-300: #9EAAA4;
  --neutral-400: #464D57;
  --neutral-500: #1A1F26;

  /* COLORS — Primary (Purple) */
  --primary-100: #EEEEF0;
  --primary-200: #8886EE;
  --primary-300: #5952E7;
  --primary-400: #3E39A2;

  /* COLORS — Feedback: Info */
  --feedback-info-100: #3880F5;
  --feedback-info-200: #2055A0;

  /* COLORS — Feedback: Success */
  --feedback-success-100: #11A07C;
  --feedback-success-200: #177F50;

  /* COLORS — Feedback: Warning */
  --feedback-warning-100: #AC8620;
  --feedback-warning-200: #996713;

  /* COLORS — Feedback: Error */
  --feedback-error-100: #F25757;
  --feedback-error-200: #BF4141;

  /* COLORS — Background */
  --background-100: #FFFFFF;
  --background-200: #F0F0F5;
  --background-300: #F3F3F0;
  --background-info: #EBF3FE;
  --background-success: #E6F5F2;
  --background-warning: #F5F3E3;
  --background-error: #FFF0EE;

  /* ===================================================================
     SEMANTIC COLOR ALIASES
     =================================================================== */
  --color-bg:          var(--background-100);
  --color-surface:     var(--background-200);
  --color-surface-alt: var(--background-300);
  --color-border:      var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text:        var(--neutral-500);
  --color-text-muted:  var(--neutral-300);
  --color-text-subtle: var(--neutral-400);
  --color-accent:      var(--primary-300);
  --color-accent-hover:var(--primary-400);
  --color-accent-light:var(--primary-100);

  /* ===================================================================
     TYPOGRAPHY
     =================================================================== */
  --font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Poppins', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Sizes */
  --text-h400:       64px;  /* Heading 400 — Bold 700 */
  --text-h300:       48px;  /* Heading 300 — Bold 700 */
  --text-h200:       32px;  /* Heading 200 — Bold 700 */
  --text-h100:       24px;  /* Heading 100 — Bold 700 */
  --text-title-200:  20px;  /* Title 200   — SemiBold 500 */
  --text-title-100:  16px;  /* Title 100   — SemiBold 500 */
  --text-title-50:   14px;  /* Title 50    — SemiBold 500 */
  --text-body-400:   20px;  /* Body 400    — Regular 400 */
  --text-body-300:   16px;  /* Body 300    — Regular 400 */
  --text-body-200:   14px;  /* Body 200    — Regular 400 */
  --text-body-100:   12px;  /* Body 100    — Regular 400 */
  --text-button:     16px;  /* Button      — Medium 500 */
  --text-link-200:   16px;  /* Link 200    — Medium 500 */
  --text-link-100:   14px;  /* Link 100    — Medium 500 */

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Line Heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ===================================================================
     SPACING
     =================================================================== */
  --spacing-0:   0px;
  --spacing-100: 2px;
  --spacing-200: 4px;
  --spacing-300: 8px;
  --spacing-400: 16px;
  --spacing-500: 24px;
  --spacing-600: 32px;
  --spacing-700: 40px;
  --spacing-800: 48px;
  --spacing-900: 56px;

  /* PADDING */
  --padding-0:   0px;
  --padding-100: 8px;
  --padding-200: 16px;
  --padding-300: 24px;
  --padding-400: 32px;

  /* ===================================================================
     BORDER RADIUS
     =================================================================== */
  --radius-100: 0px;
  --radius-200: 4px;
  --radius-300: 8px;
  --radius-400: 100px;

  /* ===================================================================
     ELEVATION (Box Shadows)
     =================================================================== */
  --elevation-100: 0px 1px 4px rgba(0, 0, 0, 0.10);
  --elevation-200: 0px 4px 6px rgba(0, 0, 0, 0.10);
  --elevation-300: 0px 8px 12px rgba(0, 0, 0, 0.10);

  /* ===================================================================
     TRANSITIONS
     =================================================================== */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ===================================================================
     LAYOUT
     =================================================================== */
  --container-max: 1200px;
  --sidebar-width: 240px;
  --header-height: 64px;

  /* Z-INDEX SCALE */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-top:     400;
}