/* ========================================================================
   Softheart Games · Design Tokens v1.2
   ------------------------------------------------------------------------
   v1.2 change (2026-04-19): site-wide type scale bumped to 125% of v1.1;
   nav heights bumped to 150%. Ken requested the baseline UI feel larger
   after reviewing Stage 3 at 100% browser zoom.
     Text tokens:  × 1.25
     Space tokens: × 1.25
     Nav heights:  × 1.50
   Radius / shadow / container max stayed put — rounding corners and
   shadows don't read "bigger", they read "different", so we leave them.
   ======================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COLORS — Backgrounds (depth scale, dark to deepest)
     ---------------------------------------------------------------------- */
  --bg-deepest:   #1F1A17;  /* Footer, nav scrolled, dropdown menu */
  --bg-base:      #2B2521;  /* Main page background */
  --bg-raised:    #3A322D;  /* Section containers, cards */
  --bg-elevated:  #463D37;  /* Form inputs, hover states */

  /* ----------------------------------------------------------------------
     COLORS — Text (cream scale, light to dimmed)
     ---------------------------------------------------------------------- */
  --cream-100:    #F5E9D0;  /* Primary text, headings */
  --cream-300:    #D4C8B0;  /* Body text, secondary */
  --cream-500:    #A89B82;  /* Muted text, labels */
  --cream-700:    #6B6253;  /* Dimmed, disabled, placeholder */

  /* ----------------------------------------------------------------------
     COLORS — Brand & Accent
     ---------------------------------------------------------------------- */
  --red-500:      #FF5255;  /* Brand red — CTA, current page underline */
  --red-600:      #E63E41;  /* Brand red hover */
  --red-700:      #C5302F;  /* Brand red pressed */

  --accent-spaceship:   #7B68B4;  /* Project Spaceship — nebula purple */
  --accent-discord:     #5865F2;  /* Discord brand blue (exception color) */
  --accent-bilibili:    #00A1D6;  /* Bilibili brand blue */
  --accent-xiaohongshu: #FE2C55;  /* Xiaohongshu brand red */
  --accent-youtube:     #FF0000;  /* YouTube brand red */

  /* ----------------------------------------------------------------------
     COLORS — Borders & dividers (semi-transparent)
     ---------------------------------------------------------------------- */
  --border-subtle:   rgba(245, 233, 208, 0.08);  /* Hairline, dividers */
  --border-default:  rgba(245, 233, 208, 0.15);  /* Cards, dropdown */
  --border-emphasis: rgba(245, 233, 208, 0.30);  /* Hover, focus */

  /* ----------------------------------------------------------------------
     COLORS — Overlays (for transparent nav over images)
     ---------------------------------------------------------------------- */
  --overlay-light:    rgba(255, 255, 255, 0.12);
  --overlay-cream:    rgba(245, 233, 208, 0.04);
  --overlay-cream-hover: rgba(245, 233, 208, 0.08);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Font stacks
     ---------------------------------------------------------------------- */
  --font-en:       'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-zh-display: 'ZCOOL QingKe HuangYou', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-zh-body:    'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-zh-long:    'Smiley Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Sizes (v1.2: bumped 125% from v1.1)
     ---------------------------------------------------------------------- */
  --text-xs:    14px;   /* was 11 */
  --text-sm:    16px;   /* was 13 */
  --text-base:  18px;   /* was 14 */
  --text-md:    20px;   /* was 16 */
  --text-lg:    22px;   /* was 18 */
  --text-xl:    28px;   /* was 22 */
  --text-2xl:   35px;   /* was 28 */
  --text-3xl:   45px;   /* was 36 */
  --text-4xl:   55px;   /* was 44 */
  --text-5xl:   70px;   /* was 56 */

  /* ----------------------------------------------------------------------
     SPACING — All vertical and horizontal rhythm (v1.2: bumped 125%)
     ---------------------------------------------------------------------- */
  --space-xs:   5px;    /* was 4 */
  --space-sm:   10px;   /* was 8 */
  --space-md:   15px;   /* was 12 */
  --space-lg:   20px;   /* was 16 */
  --space-xl:   30px;   /* was 24 */
  --space-2xl:  40px;   /* was 32 */
  --space-3xl:  60px;   /* was 48 */
  --space-4xl:  80px;   /* was 64 */
  --space-5xl:  120px;  /* was 96 */
  --space-6xl:  150px;  /* was 120 */

  /* ----------------------------------------------------------------------
     RADIUS — Border radius scale (unchanged: corners stay crisp)
     ---------------------------------------------------------------------- */
  --radius-sm:   7px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  28px;
  --radius-pill: 9999px;

  /* ----------------------------------------------------------------------
     SHADOWS — Text and box shadows (unchanged)
     ---------------------------------------------------------------------- */
  --shadow-text-soft:  0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-text-hero:  0 2px 12px rgba(0, 0, 0, 0.6);
  --shadow-card:       0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-button-flat: 4px 4px 0 rgba(0, 0, 0, 0.2);

  /* ----------------------------------------------------------------------
     LAYOUT — Sizes and limits
       · nav-heights bumped 150% (v1.2)
       · container-max / content-max / hero-window stayed put: content
         width is independent of typography scale
     ---------------------------------------------------------------------- */
  --nav-height:        96px;   /* was 64 */
  --nav-height-mobile: 84px;   /* was 56 */
  --container-max:     1040px;
  --content-max:       720px;
  --hero-window-w:     82vw;
  --hero-window-h:     76vh;

  /* ----------------------------------------------------------------------
     Z-INDEX — Layering
     ---------------------------------------------------------------------- */
  --z-base:     1;
  --z-content:  10;
  --z-nav:      100;
  --z-dropdown: 200;
  --z-modal:    300;

  /* ----------------------------------------------------------------------
     TRANSITIONS — Animation timing
     ---------------------------------------------------------------------- */
  --ease-out-quick: 0.15s ease-out;
  --ease-out:       0.3s ease-out;
  --ease-out-slow:  0.5s ease-out;
}