:root {
  /* Primary palette */
  --color-primary: #1B9BD7;
  --color-primary-light: #55D6E1;
  --color-primary-dark: #166B9A;
  --color-primary-50: #EFFBFF;
  --color-primary-100: #D8F7FB;
  --color-primary-200: #AEEAF3;
  --color-primary-300: #7CDAE6;
  --color-primary-400: #55D6E1;
  --color-primary-500: #1B9BD7;
  --color-primary-600: #147FB7;
  --color-primary-700: #166B9A;
  --color-primary-800: #164F70;

  /* Secondary / accent */
  --color-secondary: #FF5D55;
  --color-secondary-light: #FF9B36;
  --color-secondary-dark: #D83145;

  /* Success / Error / Warning */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-error: #EF4444;
  --color-error-light: #F87171;
  --color-warning: #F59E0B;
  --color-warning-light: #FBBF24;
  --color-info: #3B82F6;

  /* Backgrounds */
  --bg-app: #F5FBFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F3FF;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-input: #F9FAFB;

  /* Text */
  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-muted: #586b7d;
  --text-white: #FFFFFF;
  --text-accent: #1B9BD7;

  /* Borders */
  --border-color: #E5E7EB;
  --border-light: #F3F4F6;
  --border-focus: #1B9BD7;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1B9BD7 0%, #2DC6A1 100%);
  --gradient-secondary: linear-gradient(135deg, #FF5D55 0%, #FF9B36 100%);
  --gradient-success: linear-gradient(135deg, #10B981 0%, #34D399 100%);
  --gradient-dark: linear-gradient(135deg, #164F70 0%, #1B9BD7 100%);
  --gradient-game-bg: linear-gradient(180deg, #58D5DC 0%, #92E7BA 100%);
  --scene-bg-image: none;
  --scene-ground: #92E7BA;
  --scene-bg-base: linear-gradient(180deg, #58D5DC 0%, #72DED0 46%, #92E7BA 100%);
  --scene-background: var(--scene-bg-image), var(--scene-bg-base);
  --scene-panel: rgba(255,255,255,.78);
  --scene-panel-strong: rgba(255,255,255,.86);
  --scene-shadow: 0 16px 34px rgba(42, 63, 98, .16), inset 0 -5px 0 rgba(36, 51, 70, .08);

  /* Shared game UI surfaces */
  --surface-panel: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  --surface-card: rgba(255,255,255,.82);
  --surface-card-strong: rgba(255,255,255,.94);
  --surface-pill: rgba(255,255,255,.82);
  --surface-icon: rgba(255,255,255,.76);
  --surface-icon-strong: rgba(255,255,255,.92);
  --surface-border: 1px solid rgba(255,255,255,.68);
  --surface-inset: inset 0 -3px 0 rgba(36, 51, 70, .08);

  /* Brand / tile system */
  --brand-tile-bg: linear-gradient(135deg, #FFF2A8 0%, #FFB552 48%, #FF884C 100%);
  --brand-tile-border: #BD4825;
  --brand-tile-depth: #A93A22;
  --brand-tile-text: #FFF8DB;
  --brand-tile-highlight: inset 0 4px 0 rgba(255,255,255,.34);
  --brand-tile-shadow: 0 7px 0 var(--brand-tile-depth), 0 12px 14px rgba(47, 63, 93, .18), var(--brand-tile-highlight), inset 0 -5px 0 rgba(152, 62, 29, .18);
  --brand-tile-text-shadow: 0 2px 0 var(--brand-tile-depth);

  /* Component geometry */
  --radius-control: 20px;
  --radius-panel: 26px;
  --radius-card: 20px;
  --radius-icon-badge: 999px;
  --radius-tile: 11px;

  /* Component shadows */
  --shadow-game-soft: 0 10px 22px rgba(42, 63, 98, .12), var(--surface-inset);
  --shadow-game-panel: 0 22px 44px rgba(38, 65, 96, .18), inset 0 2px 0 rgba(255,255,255,.38);
  --shadow-game-control: 0 12px 24px rgba(43, 61, 91, .14), var(--surface-inset);
  --shadow-icon-well: 0 8px 16px rgba(42, 63, 98, .10), var(--surface-inset);
  --shadow-action: 0 10px 0 #B9A37F, 0 19px 24px rgba(44, 50, 78, .24);
  --shadow-action-hover: 0 12px 0 #B9A37F, 0 22px 28px rgba(44, 50, 78, .24);

  /* Shared action gradients */
  --gradient-action: linear-gradient(180deg, #FF6A59 0%, #EA3347 100%);
  --gradient-action-alt: linear-gradient(135deg, #FFF2A8 0%, #FFBF63 100%);
  --gradient-icon-blue: linear-gradient(135deg, #23D2F2 0%, #13A8D5 100%);
  --gradient-menu-blue: linear-gradient(135deg, #4A9DF2 0%, #3F8AE8 100%);
  --gradient-menu-green: linear-gradient(135deg, #2BC889 0%, #4ECFBA 100%);
  --gradient-menu-gold: linear-gradient(135deg, #F6A828 0%, #FFD45B 100%);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-purple: 0 4px 14px rgba(27, 155, 215, 0.28);
  --shadow-orange: 0 4px 14px rgba(255, 93, 85, 0.28);
  --shadow-tile: 0 5px 12px rgba(43, 61, 91, 0.18);
  --shadow-tile-active: 0 2px 5px rgba(43, 61, 91, 0.18);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Z-index */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-nav: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-splash: 100;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Layout */
  --nav-height: 76px;
  --top-bar-height: 70px;
  --content-max-width: 52rem;
  --mobile-shell-min-width: 20rem;
  --game-aspect-width: calc(100dvh / 1.28);
  --mobile-shell-fluid-width: min(100vw, var(--game-aspect-width));
  --mobile-shell-max-width: 54rem;
  --mobile-shell-width: clamp(var(--mobile-shell-min-width), var(--mobile-shell-fluid-width), var(--mobile-shell-max-width));
  --mobile-shell-active-width: min(100vw, var(--mobile-shell-width));
  --mobile-shell-gutter: clamp(.875rem, 3.5vw, 1.625rem);
  --mobile-content-width: calc(var(--mobile-shell-active-width) - (var(--mobile-shell-gutter) * 2));
  --mobile-panel-width: min(100%, var(--mobile-content-width));
  --sidebar-width: 0px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tablet */
@media (min-width: 640px) {
  :root {
    --content-max-width: 52rem;
    --space-md: 20px;
    --space-lg: 28px;
    --space-xl: 40px;
    --text-base: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;
    --text-4xl: 2.625rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --content-max-width: 54rem;
    --nav-height: 76px;
    --top-bar-height: 70px;
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  :root {
    --content-max-width: 54rem;
  }
}