:root {
  /* Soft pastel theme tuned for Stitch mockups */
  --app-gradient: radial-gradient(120% 120% at 18% 0%, #FFF7D6 0%, #FFF9F0 38%, #FFEFF6 100%);

  /* Backgrounds */
  --ios-bg: #FFF8F0;
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFF7EE;
  --bg-tertiary: #FFF3F8;
  --widget-bg: rgba(255, 255, 255, 0.9);

  /* Accents */
  --accent-pink: #FF8FB4;
  --accent-pink-light: #FFE4EF;
  --accent-pink-dark: #FF6B8A;
  --accent-lavender: #E5DAFF;
  --accent-mint: #A7F3D0;
  --accent-blue: #8CC8FF;
  --accent-coral: #FFB1C8;
  --accent-green: #9FE6C6;

  /* Text */
  --text-dark: #3F3F52;
  --text-primary: #3F3F52;
  --text-secondary: #6F7386;
  --text-tertiary: #9AA0B3;
  --text-grey: #9AA0B3;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.65);
  --border-light: rgba(0, 0, 0, 0.05);

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-widget: 26px;
  --radius-icon: 24%;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 4px 10px rgba(255, 168, 189, 0.15), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-soft: 0 10px 30px rgba(255, 182, 193, 0.18), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 16px 36px rgba(255, 182, 193, 0.25);

  /* Glass + buttons */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 18px 40px rgba(255, 182, 193, 0.28), 0 6px 12px rgba(0, 0, 0, 0.05);
  --fab-shadow: 0 10px 20px rgba(255, 107, 138, 0.25);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Safe Area */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);

  /* Dock */
  --dock-item-size: 60px;
  --dock-gap: 22px;
  --dock-pad-y: 18px;
  --dock-pad-x: 22px;

  /* Home */
  --home-icon-size: 52px;

  /* Shell Nav */
  --shell-nav-h: 66px;
  --shell-nav-offset: 24px;

  /* Mini Game */
  --mini-game-bg: #FFFFFF;
  --mini-game-surface: #F8F8FB;
  --mini-game-border: rgba(0, 0, 0, 0.06);
  --mini-game-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  --mini-game-accent: #FF8FAB;
  --mini-game-accent-soft: #FFF0F3;
  --mini-game-board: #F4E9DE;
  --mini-game-line: rgba(0, 0, 0, 0.08);
  --mini-game-black: #2B2B2B;
  --mini-game-white: #FFFFFF;
  --gomoku-size: 13;

  /* Spy Phone */
  --spy-phone-bg: #fff7fb;
  --spy-phone-surface: #ffffff;
  --spy-phone-text: #2b2b2b;
  --spy-phone-muted: #8b8b8b;
  --spy-phone-accent: #ff8fb2;
  --spy-phone-accent-soft: #ffe3ee;
  --spy-phone-radius: 24px;
  --spy-phone-shadow: 0 18px 45px rgba(23, 22, 24, 0.22);
}