:root {
  /* Color */
  /*
   * Color scale roles:
   * 100 default background, 200 hover background, 300 active background
   * 400 default border, 500 hover border, 600 active border
   * 700 solid fill, 800 solid fill hover
   * 900 secondary text/icons, 1000 primary text/icons
   */
  --color-ink-100: #ffffff;
  --color-ink-200: #f5f7fb;
  --color-ink-300: #f3f5f8;
  --color-ink-400: #c5c8cc;
  --color-ink-500: #9a9b9d;
  --color-ink-600: #6b7680;
  --color-ink-700: #4f5c65;
  --color-ink-800: #223240;
  --color-ink-900: #140e12;
  --color-ink-1000: #000000;
  --color-warm-100: #fff9ec;
  --color-warm-200: #fff4e0;
  --color-warm-300: #fcf9e6;
  --color-warm-400: #f8ead0;
  --color-warm-500: #f7dcbc;
  --color-warm-600: #ede5dc;
  --color-warm-700: #d9c3ad;
  --color-warm-800: #716051;
  --color-warm-900: #5d4742;
  --color-warm-1000: #25150b;
  --color-red-100: #ffe8e8;
  --color-red-200: #ff5b45;
  --color-red-300: #ff4750;
  --color-red-400: #ff2d2d;
  --color-red-500: #d05240;
  --color-red-600: #c54141;
  --color-red-700: #bb4434;
  --color-red-800: #8f3131;
  --color-red-900: #2d120e;
  --color-red-1000: #280405;
  --color-gold-100: #fff4e0;
  --color-gold-200: #fff1c4;
  --color-gold-300: #ffdd82;
  --color-gold-400: #ffd666;
  --color-gold-500: #ffa008;
  --color-gold-600: #e3a760;
  --color-gold-700: #d8b286;
  --color-gold-800: #8c6137;
  --color-gold-900: #60462d;
  --color-gold-1000: #312219;
  --color-blue-100: #e6f3ff;
  --color-blue-200: #c8e8ff;
  --color-blue-300: #aaddff;
  --color-blue-400: #85d2ff;
  --color-blue-500: #5aaeff;
  --color-blue-600: #2b66ff;
  --color-blue-700: #214fc4;
  --color-blue-800: #173789;
  --color-blue-900: #101f4d;
  --color-blue-1000: #0a1329;
  --color-bg-page: var(--color-ink-900);
  --color-bg-hero: var(--color-ink-900);
  --color-bg-section-dark: var(--color-ink-900);
  --color-surface-panel: color-mix(in srgb, var(--color-ink-900) 88%, transparent);
  --color-surface-debug-trigger: color-mix(in srgb, var(--color-ink-900) 84%, transparent);
  --color-surface-debug-backdrop: color-mix(in srgb, var(--color-ink-1000) 58%, transparent);
  --color-surface-debug: color-mix(in srgb, var(--color-ink-900) 92%, transparent);
  --color-surface-debug-row: color-mix(in srgb, var(--color-ink-100) 4%, transparent);
  --color-surface-debug-control: color-mix(in srgb, var(--color-ink-1000) 88%, transparent);
  --color-surface-debug-ghost: color-mix(in srgb, var(--color-ink-100) 8%, transparent);
  --color-surface-download-side: color-mix(in srgb, var(--color-gold-800) 20%, transparent);
  --color-surface-news-tab: color-mix(in srgb, var(--color-ink-600) 14%, transparent);
  --color-surface-news-paper-mobile: color-mix(in srgb, var(--color-warm-300) 92%, transparent);
  --color-text-primary: var(--color-ink-100);
  --color-text-muted: var(--color-ink-500);
  --color-text-dark: var(--color-ink-800);
  --color-text-download-vertical: color-mix(in srgb, var(--color-ink-300) 90%, transparent);
  --color-text-news-body: var(--color-ink-700);
  --color-text-news: var(--color-ink-700);
  --color-text-news-muted: var(--color-ink-600);
  --color-text-footer: var(--color-ink-400);
  --color-text-debug-trigger: var(--color-ink-200);
  --color-text-debug: var(--color-ink-300);
  --color-text-debug-secondary: color-mix(in srgb, var(--color-ink-300) 65%, transparent);
  --color-text-debug-muted: color-mix(in srgb, var(--color-ink-300) 72%, transparent);
  --color-text-debug-value: color-mix(in srgb, var(--color-ink-300) 70%, transparent);
  --color-border-panel: color-mix(in srgb, var(--color-ink-100) 8%, transparent);
  --color-border-field: color-mix(in srgb, var(--color-ink-100) 12%, transparent);
  --color-border-news-row: color-mix(in srgb, var(--color-ink-700) 16%, transparent);
  --color-border-store-apple: var(--color-ink-600);
  --color-border-download-side: color-mix(in srgb, var(--color-gold-800) 60%, transparent);
  --color-store-apple: var(--color-ink-1000);
  --color-store-apple-hover: var(--color-ink-900);
  --color-store-android: var(--color-red-700);
  --color-store-android-hover: var(--color-red-500);
  --color-accent-danger: var(--color-red-400);
  --color-accent-danger-hot: var(--color-red-200);
  --color-accent-action: var(--color-blue-600);
  --color-focus-ring: color-mix(in srgb, var(--color-gold-700) 90%, transparent);

  /* Typography */
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-serif: "Songti SC", "STSong", serif;
  --font-serif-accent: "Times New Roman", "Songti SC", serif;
  --font-label-10: 10px;
  --font-label-12: 12px;
  --font-body-14: 14px;
  --font-body-16: 16px;
  --font-body-18: 18px;
  --font-heading-22: 22px;
  --font-heading-26: 26px;
  --font-heading-30: 30px;
  --font-heading-36: 36px;
  --letter-spacing-tight: 0.14px;
  --letter-spacing-ui: 0.04em;
  --letter-spacing-wide: 0.18em;
  --letter-spacing-store-button: 0.18px;

  /* Sizing */
  --size-hairline: 1px;
  --scroll-hint-width: clamp(44px, 2.6vw, 48px);
  --scroll-hint-padding-bottom: var(--space-24);
  --scroll-hint-height: calc(var(--scroll-hint-width) * 88 / 99 + var(--scroll-hint-padding-bottom));

  /* Spacing */
  --space-0: 0;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;

  /* Radius */
  --radius-2xs: 4px;
  --radius-xs: 5px;
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-12: 12px;
  --radius-13-6: 13.6px;
  --radius-md: 14px;
  --radius-xl: 16px;
  --radius-lg: 18px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --radius-full: 15984px;

  /* Controls */
  --control-height-sm: var(--space-32);
  --control-height-md: var(--space-32);
  --control-radius-sm: var(--radius-2xs);
  --download-card-width-mobile: min(100%, 360px);
  --download-card-gap: var(--space-12);
  --download-card-padding: var(--space-16);
  --download-label-width: var(--space-16);
  --download-label-height: 109px;
  --download-label-line-height: var(--font-body-18);
  --download-label-height-mobile: 96px;
  --download-label-font-size-mobile: var(--font-label-12);
  --download-label-line-height-mobile: var(--font-body-16);
  --download-content-gap: var(--space-8);
  --download-qr-size: calc(var(--space-4) * 30);
  --download-qr-size-mobile: 96px;
  --download-actions-width: 173px;
  --download-actions-height: var(--download-qr-size);
  --download-actions-width-mobile: 140px;
  --download-actions-height-mobile: var(--download-qr-size-mobile);
  --download-store-button-gap: var(--space-12);
  --download-store-button-width: var(--download-actions-width);
  --download-store-button-min-height: 57px;
  --download-store-button-padding: var(--space-4) var(--space-12) var(--space-4);
  --download-store-icon-size: var(--space-32);
  --download-store-copy-width: 105px;
  --download-card-gap-mobile: var(--space-12);
  --download-card-padding-mobile: var(--space-12);
  --download-content-gap-mobile: var(--space-8);
  --download-store-button-gap-mobile: var(--space-8);
  --download-store-button-width-mobile: var(--download-actions-width-mobile);
  --download-store-button-min-height-mobile: 45px;
  --download-store-button-padding-mobile: var(--space-4) var(--space-12);
  --download-store-icon-size-mobile: 26px;
  --download-store-copy-width-mobile: 82px;
  --download-store-button-font-size: var(--font-body-18);
  --download-store-button-font-size-mobile: var(--font-body-16);
  --download-panel-width: 205px;
  --download-panel-qr-size: 173px;
  --download-scan-line-height: var(--space-4);
  --news-tab-min-width: 104px;
  --news-tabs-min-height: 54.4px;
  --news-tab-padding: var(--space-12) var(--space-32);
  --news-tab-font-size: clamp(var(--font-body-18), 1.05vw, var(--font-heading-22));
  --news-link-width: calc(100% - var(--space-4));
  --news-link-min-height: 56px;
  --news-link-gap: var(--space-16);
  --news-link-padding: var(--space-16) var(--space-0);
  --news-item-meta-font-size: clamp(var(--font-body-14), 0.84vw, var(--font-body-16));
  --news-item-title-font-size: clamp(var(--font-body-16), 0.94vw, var(--font-body-18));
  --news-pagination-gap: var(--space-16);
  --news-pagination-margin-bottom: var(--space-12);
  --news-pagination-padding-bottom: var(--space-16);
  --news-pagination-font-size: var(--font-body-14);
  --news-page-control-height: var(--control-height-md);
  --news-page-arrow-font-size: var(--font-heading-22);
  --news-page-input-width: 52px;
  --news-tab-padding-mobile: var(--space-12) var(--space-16);
  --news-tab-font-size-mobile: var(--font-body-16);
  --news-link-gap-mobile: var(--space-8);
  --news-link-padding-mobile: var(--space-12) var(--space-0);
  --news-item-meta-font-size-mobile: var(--font-body-14);
  --news-item-title-font-size-mobile: var(--font-body-16);
  --news-pagination-gap-mobile: var(--space-8) var(--space-12);
  --news-pagination-font-size-mobile: var(--font-body-14);
  --news-page-arrow-font-size-mobile: var(--font-heading-22);
  --news-page-input-width-mobile: 44px;
  --role-filter-trigger-padding: var(--space-0) clamp(var(--space-40), 3.43vw, var(--space-64)) var(--space-0) clamp(var(--space-32), 2.5vw, var(--space-40));
  --role-filter-trigger-font-size: clamp(var(--font-heading-22), 1.46vw, var(--font-heading-30));
  --role-filter-trigger-icon-right: clamp(31px, 2.03vw, 39px);
  --role-filter-trigger-icon-width: clamp(21px, 1.495vw, 29px);
  --role-filter-menu-padding: var(--space-8);
  --role-filter-menu-radius: var(--radius-base);
  --role-filter-option-height: var(--space-40);
  --role-filter-option-padding: var(--space-0) var(--space-16);
  --role-filter-option-radius: var(--radius-xs);
  --role-filter-option-font-size: clamp(var(--font-body-16), 0.94vw, var(--font-body-18));

  /* Shadow */
  --shadow-panel: 0 24px 60px color-mix(in srgb, var(--color-ink-1000) 45%, transparent);
  --shadow-download: 0 24px 60px color-mix(in srgb, var(--color-ink-1000) 35%, transparent);
  --shadow-debug-trigger: 0 16px 36px color-mix(in srgb, var(--color-ink-1000) 28%, transparent);
  --shadow-debug-panel: 0 24px 80px color-mix(in srgb, var(--color-ink-1000) 35%, transparent);
  --shadow-card: 0 10px 22px color-mix(in srgb, var(--color-ink-1000) 14%, transparent);
  --shadow-news-poster: 0 16px 40px color-mix(in srgb, var(--color-ink-1000) 22%, transparent);
  --shadow-news-paper-mobile: 0 16px 40px color-mix(in srgb, var(--color-ink-1000) 20%, transparent);
  --shadow-hero-title: 0 10px 26px color-mix(in srgb, var(--color-ink-1000) 28%, transparent);
  --shadow-scan-line:
    0 0 8px color-mix(in srgb, var(--color-accent-danger) 90%, transparent),
    0 0 18px color-mix(in srgb, var(--color-accent-danger) 45%, transparent);

  /* Layer */
  --z-header: 20;
  --z-scroll-indicator: 25;
  --z-debug-trigger: 40;
  --z-carousel: 45;
  --z-debug-modal: 50;
  --z-content: 2;
  --z-floating: 4;

  /* Motion */
  --duration-fast: 180ms;
  --duration-parallax: 120ms;
  --ease-standard: ease;
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-parallax: var(--duration-parallax) linear;

  /* Header and navigation */
  --site-header-height: 134px;
  --site-header-gap: var(--space-24);
  --site-header-padding: var(--space-24) var(--space-24) var(--space-24) calc(var(--space-4) * 12);
  --site-header-padding-compact-y: clamp(var(--space-8), 1.4vw, var(--space-24));
  --site-header-padding-compact-right: clamp(var(--space-8), 1.67vw, var(--space-24));
  --site-header-padding-compact-left: clamp(var(--space-8), 2.22vw, var(--space-24));
  --site-header-padding-compact:
    var(--site-header-padding-compact-y)
    var(--site-header-padding-compact-right)
    var(--site-header-padding-compact-y)
    var(--site-header-padding-compact-left);
  --site-brand-width: 200px;
  --site-brand-height: 86px;
  --site-brand-width-compact: 176px;
  --site-brand-height-compact: 75.68px;
  --site-brand-scale-compact: 0.88;
  --site-nav-max-width: 1280px;
  --site-nav-available-offset: 296px;
  --site-nav-available-offset-compact: 272px;
  --site-nav-available-offset-narrow: 248px;
  --site-nav-height: 86px;
  --nav-item-max-width: 240px;
  --nav-item-gap: var(--space-4);
  --nav-icon-size: 46px;
  --nav-icon-size-compact: 40px;
  --nav-active-width: 118.3px;
  --nav-active-height: 38px;
  --nav-active-width-compact: 108px;
  --nav-active-height-compact: 35px;
  --nav-home-letter-spacing: var(--letter-spacing-wide);
  --nav-home-letter-spacing-compact: var(--letter-spacing-wide);
  --nav-en-letter-spacing: var(--letter-spacing-wide);
  --nav-en-letter-spacing-compact: var(--letter-spacing-wide);

  /* Effects */
  --gradient-header: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-ink-900) 22%, transparent) 0%,
    color-mix(in srgb, var(--color-ink-900) 0%, transparent) 100%
  );
  --overlay-section:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-ink-900) 15%, transparent),
      color-mix(in srgb, var(--color-ink-900) 28%, transparent)
    ),
    radial-gradient(circle at center, color-mix(in srgb, var(--color-ink-100) 4%, transparent), transparent 45%);
  --gradient-scan-line: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-accent-danger) 0%, transparent),
    var(--color-accent-danger) 18%,
    var(--color-accent-danger-hot) 50%,
    var(--color-accent-danger) 82%,
    color-mix(in srgb, var(--color-accent-danger) 0%, transparent)
  );

  /* Assets */
  --asset-nav-active-ink: url("../assets/header/nav-active-ink.svg");
  --asset-nav-home: url("../assets/header/nav-home.png");
  --asset-nav-features: url("../assets/header/nav-features.png");
  --asset-nav-roles: url("../assets/header/nav-roles.png");
  --asset-nav-news: url("../assets/header/nav-news.png");
  --asset-nav-contact: url("../assets/header/nav-contact.png");
  --asset-screen-features-bg: url("../assets/features/figma-bg-features-composite.png");
  --asset-screen-news-bg: url("../assets/shared/bg03.png");
  --asset-screen-roles-bg: url("../assets/shared/bg03.png");
  --asset-news-paper: url("../assets/screennews/bg-paper.png");
  --asset-brand-paper: url("../assets/brand/bg_paper_brand.png");
  --asset-news-tag: url("../assets/screennews/img-tag-news.png");
  --asset-news-banner: url("../assets/screennews/banner.png");
  --asset-screen-hub-bg: url("https://www.figma.com/api/mcp/asset/2765f7b7-9849-49d6-935b-fdca83f4b642");
  --asset-screen-follow-bg: url("../assets/follow/bg03.jpg");
  --asset-follow-card-frame: url("../assets/follow/bg_qrcode.png");
  --asset-news-board: url("https://www.figma.com/api/mcp/asset/84135f1e-ebb1-42f9-b9f4-7cfda0ca04cf");
  --asset-hub-title: url("https://www.figma.com/api/mcp/asset/1b505b8f-de33-482c-8dcd-6fa6340de623");
  --asset-hub-card-props: url("https://www.figma.com/api/mcp/asset/0e518c48-2691-4c1a-b4ef-93b0950f7b97");
  --asset-hub-card-monsters: url("https://www.figma.com/api/mcp/asset/49a46832-c61a-49c8-8a74-06fcf7753714");
  --asset-hub-card-community: url("https://www.figma.com/api/mcp/asset/55fbb36c-cbda-4aaa-96ba-f0cd1f694635");
  --asset-scroll-indicator: url("../assets/shared/img_scroll_hint.png");

  /* Backward-compatible aliases used by existing page styles. */
  --bg: var(--color-bg-page);
  --text-main: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --text-dark: var(--color-text-dark);
  --panel-border: var(--color-border-panel);
  --panel-shadow: var(--shadow-panel);
  --nav-active-ink: var(--asset-nav-active-ink);
  --screen-features-bg: var(--asset-screen-features-bg);
  --screen-news-bg: var(--asset-screen-news-bg);
  --screen-roles-bg: var(--asset-screen-roles-bg);
  --screen-hub-bg: var(--asset-screen-hub-bg);
  --screen-follow-bg: var(--asset-screen-follow-bg);
  --follow-card-frame: var(--asset-follow-card-frame);
}

@media (max-width: 850px) {
  :root {
    --asset-screen-news-bg: url("../assets/shared/bg_03_mobile.png");
    --asset-screen-roles-bg: url("../assets/shared/bg_03_mobile.png");
    --asset-news-paper: url("../assets/screennews/bg_paper_mobile.png");
    --asset-screen-follow-bg: url("../assets/follow/bg03_mobile.png");
    --download-card-gap: var(--download-card-gap-mobile);
    --download-card-padding: var(--download-card-padding-mobile);
    --download-label-height: var(--download-label-height-mobile);
    --download-label-line-height: var(--download-label-line-height-mobile);
    --download-content-gap: var(--download-content-gap-mobile);
    --download-qr-size: var(--download-qr-size-mobile);
    --download-actions-width: var(--download-actions-width-mobile);
    --download-actions-height: var(--download-actions-height-mobile);
    --download-store-button-gap: var(--download-store-button-gap-mobile);
    --download-store-button-width: var(--download-store-button-width-mobile);
    --download-store-button-min-height: var(--download-store-button-min-height-mobile);
    --download-store-button-padding: var(--download-store-button-padding-mobile);
    --download-store-icon-size: var(--download-store-icon-size-mobile);
    --download-store-copy-width: var(--download-store-copy-width-mobile);
    --download-store-button-font-size: var(--download-store-button-font-size-mobile);
    --news-tab-padding: var(--news-tab-padding-mobile);
    --news-tab-font-size: var(--news-tab-font-size-mobile);
    --news-link-gap: var(--news-link-gap-mobile);
    --news-link-padding: var(--news-link-padding-mobile);
    --news-item-meta-font-size: var(--news-item-meta-font-size-mobile);
    --news-item-title-font-size: var(--news-item-title-font-size-mobile);
    --news-pagination-gap: var(--news-pagination-gap-mobile);
    --news-pagination-font-size: var(--news-pagination-font-size-mobile);
    --news-page-control-height: var(--control-height-sm);
    --news-page-arrow-font-size: var(--news-page-arrow-font-size-mobile);
    --news-page-input-width: var(--news-page-input-width-mobile);
    --role-filter-trigger-padding: var(--space-0) var(--space-40) var(--space-0) var(--space-32);
    --role-filter-trigger-font-size: var(--font-body-18);
    --role-filter-trigger-icon-right: var(--space-32);
    --role-filter-trigger-icon-width: var(--space-24);
  }
}