/* ============================================
   801UU Design Tokens — Google Material Design 3
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary: #1A73E8;
  --color-primary-hover: #185ABC;
  --color-primary-container: #E8F0FE;

  --color-background: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-surface-variant: #F1F3F4;

  --color-text-primary: #202124;
  --color-text-secondary: #5F6368;
  --color-text-on-primary: #FFFFFF;
  --color-text-disabled: #9AA0A6;

  --color-border: #DADCE0;
  --color-border-light: #E8EAED;

  --color-success: #34A853;
  --color-success-container: #E6F4EA;
  --color-warning: #FBBC04;
  --color-warning-container: #FEF7E0;
  --color-error: #EA4335;
  --color-error-container: #FCE8E6;

  /* Game-specific colors */
  --color-banker: #EA4335;
  --color-player: #1A73E8;
  --color-tie: #FBBC04;

  /* ---- Radius ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* ---- Layout ---- */
  --container-width: 1280px;
  --header-height: 64px;
  --sidebar-width: 280px;

  /* ---- Typography ---- */
  --font-family: 'Inter', Arial, system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', SFMono-Regular, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;
  --text-6xl: 56px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ---- Transitions ---- */
  --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 250ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 400ms cubic-bezier(0.2, 0, 0, 1);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ---- Safe Area ---- */
@supports (padding-top: env(safe-area-inset-top)) {
  :root {
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
  }
}