/* Design tokens — single source of truth for color, spacing, type, radius, shadow.
   Everything else references these so a polish pass stays centralized.
   Dark, courtside-at-night palette with a basketball-orange accent. */

:root {
  /* Brand / accent */
  --c-accent: #ff7a2f; /* basketball orange */
  --c-accent-strong: #ff6a15;
  --c-accent-soft: rgba(255, 122, 47, 0.14);

  /* Surfaces */
  --c-bg: #0f1115;
  --c-surface: #171a21;
  --c-surface-2: #1f2430;
  --c-surface-3: #272d3a;
  --c-elevated: #202634;

  /* Text */
  --c-text: #f3f5f8;
  --c-text-muted: #a4adbd;
  --c-text-faint: #6f7889;

  /* Lines */
  --c-border: #2a3140;
  --c-border-soft: #222836;

  /* Semantic */
  --c-success: #37c978;
  --c-warning: #ffc24b;
  --c-danger: #ff5470;
  --c-info: #4aa8ff;

  /* Skill colors */
  --c-beginner: #4aa8ff;
  --c-intermediate: #37c978;
  --c-advanced: #ff7a2f;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Type scale */
  --f-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-xs: 11px;
  --f-sm: 13px;
  --f-md: 15px;
  --f-lg: 17px;
  --f-xl: 20px;
  --f-2xl: 26px;
  --f-3xl: 32px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.35);
  --shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.55);

  /* Layout */
  --frame-w: 390px;
  --frame-h: 844px;
  --tabbar-h: 64px;
  --header-h: 56px;
}