
:root {
  /* 色彩系统 */
  /* 设计稿：01_Main_File_Light（2025-12-17） */
  --color-primary: #34d9d1;
  --color-primary-soft: #8df3ed;
  --color-primary-bright: #4de0d9;
  --color-secondary: #a6a3b8;
  --color-secondary-strong: #191c24;
  --color-icon-strong: #363d4e;
  --color-surface: #ffffff;
  --color-surface-elevated: #eff0f6;
  --color-surface-contrast: #191c24;
  --color-page: #f9f9ff;
  --color-text-primary: #191c24;
  --color-text-body: #191c26;
  --color-text-muted: #a6a3b8;
  --color-line: #d0d3e5;
  --color-line-strong: #a6a3b8;
  --color-success: #34d9d1;
  --color-warning-soft: #fac47f;
  --color-warning: #f8a946;
  --color-danger: #fe8270;
  --color-accent-pink: #ff73aa;
  --color-info: #4bc0ff;

  /* 渐变色（来自设计稿色板） */
  --gradient-primary: linear-gradient(90deg, #8df3ed 0%, #34d9d1 100%);
  --gradient-danger: linear-gradient(90deg, #ffd5cf 0%, #fe8270 100%);
  --gradient-warning: linear-gradient(90deg, #fac47f 0%, #f8a946 100%);
  --gradient-info: linear-gradient(90deg, #a7d7f2 0%, #4bc0ff 100%);
  --gradient-pink: linear-gradient(90deg, #ff9bd0 0%, #ff73aa 100%);
  --gradient-purple: linear-gradient(90deg, #c1b2ff 0%, #9b87ff 100%);
  --gradient-yellow: linear-gradient(90deg, #ffe45e 0%, #ffd206 100%);

  /* 渐变色（竖向，用于页面还原） */
  --gradient-primary-vertical: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-primary) 100%);
  --gradient-purple-vertical: linear-gradient(180deg, #c1b2ff 0%, #9b87ff 100%);
  --gradient-pink-vertical: linear-gradient(180deg, #ff9bd0 0%, var(--color-accent-pink) 100%);
  --gradient-warning-vertical: linear-gradient(180deg, var(--color-warning-soft) 0%, var(--color-warning) 100%);
  --gradient-danger-vertical: linear-gradient(180deg, #ffd5cf 0%, var(--color-danger) 100%);
  --gradient-info-vertical: linear-gradient(180deg, #a7d7f2 0%, var(--color-info) 100%);

  /* 字体与字号 */
  --font-family-display: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-heading: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-ui: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --font-size-display: 32px;
  --line-height-display: 37.5px;
  --font-size-title-lg: 24px;
  --line-height-title-lg: 28.125px;
  --font-size-title-md: 22px;
  --line-height-title-md: 25.78125px;
  --font-size-title-sm: 20px;
  --line-height-title-sm: 23.4375px;
  --font-size-heading: 16px;
  --line-height-heading: 18.75px;
  --font-size-body: 16px;
  --line-height-body: 18.75px;
  --font-size-footnote: 14px;
  --line-height-footnote: 16.40625px;
  --font-size-caption-1: 12px;
  --line-height-caption-1: 14.0625px;
  --font-size-caption-2: 12px;
  --line-height-caption-2: 14.0625px;
  --font-size-caption-compact: 10px;
  --line-height-caption-compact: 13px;

  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* 间距系统 */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-xxs: var(--space-4);
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-40);
  --space-3xl: var(--space-48);
  --space-4xl: var(--space-56);
  --space-5xl: var(--space-64);

  /* 圆角 */
  --radius-pill: 999px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-card: 10px;
  --radius-sm: 8px;

  /* 阴影示例 */
  /* 设计稿：X:0 / Y:0 / Blur:30 / #000000 5% */
  --shadow-soft: 0 0 30px rgba(0, 0, 0, 0.05);
  --shadow-strong: 0 0 30px rgba(0, 0, 0, 0.05);

  /* 扩展色值（用于页面像素级还原） */
  --color-accent-purple: #9c88ff;
  --color-text-inverse-soft: #f7f7f7;
  --color-text-inverse: #fefefe;
  --color-accent-rose: #ff5a75;
  --color-accent-mint: rgba(12, 254, 188, 0.9);

  --color-chart-bitcoin-area-start: #ff8ac0;
  --color-chart-bitcoin-area-end: #22a1eb;
  --color-chart-bitcoin-line: #f73b71;
  --color-chart-dash-area-start: #56c2fd;
  --color-chart-dash-area-mid: #1df7bc;
  --color-chart-dash-area-end: #ff5a75;
  --color-chart-dash-line: #4ec0fe;
  --color-chart-etherum-area-start: #fdab09;
  --color-chart-etherum-area-mid: #fdab09;
  --color-chart-etherum-area-end: #8146eb;
  --color-chart-etherum-line: #fdab09;

  /* 透明色（供 DOM/CSS 组件使用） */
  --kkd-color-white-alpha-55: rgba(255, 255, 255, 0.55);
  --kkd-color-white-alpha-22: rgba(255, 255, 255, 0.22);
  --kkd-color-black-alpha-06: rgba(0, 0, 0, 0.06);
  --kkd-color-black-alpha-05: rgba(0, 0, 0, 0.05);

  /* Test Components（Symbols & Component）页面变量 */
  --kkd-components-page-max-width: 980px;
  --kkd-components-search-max-width: 360px;
  --kkd-components-country-min-width: 120px;
  --kkd-components-block-max-width: 420px;

  /* Home（22_Home_V3）布局变量 */
  --kkd-home-frame-width: 425px;
  --kkd-home-frame-height: 980px;
  --kkd-home-bg-top: 112px;

  --kkd-home-control-y: 47px;
  --kkd-home-control-size: 40px;
  --kkd-home-menu-x: 15px;
  --kkd-home-notification-x: 318px;
  --kkd-home-menu-icon-width: 25.62px;
  --kkd-home-menu-icon-height: 21px;

  --kkd-home-card-x: 20px;
  --kkd-home-card-y: 140px;
  --kkd-home-card-width: 335px;
  --kkd-home-card-height: 160px;

  --kkd-home-card-pill-width: 96px;
  --kkd-home-card-pill-height: 32px;
  --kkd-home-card-pill-radius: 16px;
  --kkd-home-card-pill-gap: 10px;
  --kkd-home-card-pill-padding-left: 14.02px;
  --kkd-home-card-pill-padding-right: 11.31px;
  --kkd-home-card-pill-font-size: 12px;
  --kkd-home-card-pill-line-height: 1.171875em;
  --kkd-home-card-pill-chevron-width: 10.67px;
  --kkd-home-card-pill-chevron-height: 5.35px;
  --kkd-home-card-pill-pair-x: 23px;
  --kkd-home-card-pill-pair-y: 24px;
  --kkd-home-card-pill-add-x: 212px;
  --kkd-home-card-pill-add-y: 104px;

  --kkd-home-card-text-x: 24px;
  --kkd-home-card-text-y: 73px;
  --kkd-home-card-text-width: 144px;
  --kkd-home-card-text-height: 60px;
  --kkd-home-card-price-font-size: 30px;
  --kkd-home-card-price-line-height: 1.171875em;
  --kkd-home-card-meta-y: 46px;
  --kkd-home-card-meta-height: 14px;
  --kkd-home-card-change-x: 50px;
  --kkd-home-card-meta-chevron-x: 94.66px;
  --kkd-home-card-meta-chevron-y: 2.24px;
  --kkd-home-card-source-chevron-width: 12.92px;
  --kkd-home-card-source-chevron-height: 8.16px;

  --kkd-home-stats-y: 330px;
  --kkd-home-stats-height: 80px;
  --kkd-home-stat-width: 125px;
  --kkd-home-stat-height: 80px;
  --kkd-home-stat-radius-lg: 15px;
  --kkd-home-stat-value-font-size: 16px;
  --kkd-home-stat-value-line-height: 1.171875em;
  --kkd-home-stat-label-font-size: 12px;
  --kkd-home-stat-label-line-height: 1.171875em;
  --kkd-home-stat-global-x: 20px;
  --kkd-home-stat-cap-x: 155px;
  --kkd-home-stat-volume-x: 291px;
  --kkd-home-stat-padding-x: 18px;
  --kkd-home-stat-value-y: 21px;
  --kkd-home-stat-label-y: 48px;
  --kkd-home-stat-global-padding-x: 18px;
  --kkd-home-stat-global-value-y: 21px;
  --kkd-home-stat-global-label-y: 48px;
  --kkd-home-stat-cap-padding-x: 15px;
  --kkd-home-stat-cap-value-y: 20.5px;
  --kkd-home-stat-cap-label-y: 46px;
  --kkd-home-stat-volume-padding-x: 16px;
  --kkd-home-stat-volume-value-y: 21px;
  --kkd-home-stat-volume-label-y: 47px;

  --kkd-home-activity-x: 20px;
  --kkd-home-activity-y: 439px;
  --kkd-home-activity-viewport-width: 335px;
  --kkd-home-activity-header-height: 24px;
  --kkd-home-activity-list-top: 43px;
  --kkd-home-activity-gap: 16px;
  --kkd-home-activity-scroll-padding-bottom: 0px;
  --kkd-home-activity-card-width: 140px;
  --kkd-home-activity-card-height: 188px;
  --kkd-home-activity-card-radius: 16px;
  --kkd-home-activity-more-opacity: 0.7;

  --kkd-home-activity-title-y: 20px;
  --kkd-home-activity-title-bitcoin-x: 61px;
  --kkd-home-activity-title-dash-x: 56px;
  --kkd-home-activity-title-etherum-x: 58px;
  --kkd-home-activity-title-font-size: 14px;
  --kkd-home-activity-title-line-height: 1.171875em;

  --kkd-home-activity-logo-y: 11.73px;
  --kkd-home-activity-logo-bitcoin-x: 14.31px;
  --kkd-home-activity-logo-default-x: 15px;
  --kkd-home-activity-logo-width: 33.36px;
  --kkd-home-activity-logo-height: 34.56px;
  --kkd-home-activity-logo-icon-width: 13.78px;
  --kkd-home-activity-logo-icon-height: 19.05px;
  --kkd-home-activity-logo-icon-bitcoin-width: 13.78px;
  --kkd-home-activity-logo-icon-bitcoin-height: 19.05px;
  --kkd-home-activity-logo-icon-dash-width: 19.99px;
  --kkd-home-activity-logo-icon-dash-height: 11.56px;

  --kkd-home-activity-value-x: 15px;
  --kkd-home-activity-value-y: 51px;
  --kkd-home-activity-value-font-size: 22px;
  --kkd-home-activity-value-line-height: 1.171875em;

  --kkd-home-activity-symbol-x: 91px;
  --kkd-home-activity-symbol-y: 55px;
  --kkd-home-activity-symbol-font-size: 14px;
  --kkd-home-activity-symbol-line-height: 1.171875em;

  --kkd-home-activity-change-x: 15px;
  --kkd-home-activity-change-y: 81px;
  --kkd-home-activity-change-font-size: 12px;
  --kkd-home-activity-change-line-height: 1.171875em;

  --kkd-home-activity-chart-y: 108.54px;
  --kkd-home-activity-chart-width: 218.75px;
  --kkd-home-activity-chart-area-height: 92.71px;
  --kkd-home-activity-chart-line-x: 1.04px;
  --kkd-home-activity-chart-line-y: 0px;
  --kkd-home-activity-chart-line-width: 217.71px;
  --kkd-home-activity-chart-line-height: 54.17px;
  --kkd-home-activity-chart-x-bitcoin: -41px;
  --kkd-home-activity-chart-x-default: -71px;

  --kkd-home-market-x: 0px;
  --kkd-home-market-y: 723px;
  --kkd-home-market-width: 375px;
  --kkd-home-market-header-x: 21px;
  --kkd-home-market-header-width: 330px;
  --kkd-home-market-header-height: 25px;
  --kkd-home-market-more-top: 7px;
  --kkd-home-market-item-x: 20px;
  --kkd-home-market-item-y: 42px;
  --kkd-home-market-item-width: 335px;
  --kkd-home-market-item-height: 73px;
  --kkd-home-market-item-padding-top: 12px;
  --kkd-home-market-item-gap: 16px;
  --kkd-home-market-coin-width: 48.21px;
  --kkd-home-market-coin-height: 50px;
  --kkd-home-market-main-gap: 9px;
  --kkd-home-market-name-font-size: 18px;
  --kkd-home-market-name-line-height: 1.171875em;
  --kkd-home-market-symbol-font-size: 14px;
  --kkd-home-market-symbol-line-height: 1.171875em;
  --kkd-home-market-metrics-gap: 10px;
  --kkd-home-market-change-gap: 4px;
  --kkd-home-market-change-icon-size: 6.4px;

  --kkd-home-section-title-font-size: 20px;
  --kkd-home-section-title-line-height: 1.171875em;
  --kkd-home-section-link-font-size: 15px;
  --kkd-home-section-link-line-height: 1.171875em;

  --kkd-home-nav-y: 868px;
  --kkd-home-nav-height: 110px;

  /* Profile（28_Portfolio）布局变量 */
  --kkd-profile-frame-width: 375px;
  --kkd-profile-frame-height: 957px;

  --kkd-profile-top-x: 25px;
  --kkd-profile-top-y: 60px;
  --kkd-profile-top-width: 330px;
  --kkd-profile-top-height: 40px;
  --kkd-profile-top-btn-size: 40px;
  --kkd-profile-top-more-x: 290px;
  --kkd-profile-top-title-x: 121.35px;
  --kkd-profile-top-title-y: 9px;

  --kkd-profile-card-x: 20px;
  --kkd-profile-card-y: 120px;
  --kkd-profile-card-width: 335px;
  --kkd-profile-card-height: 160px;
  --kkd-profile-card-radius: 16px;

  --kkd-profile-card-pill-width: 96px;
  --kkd-profile-card-pill-height: 32px;
  --kkd-profile-card-pill-radius: 16px;
  --kkd-profile-card-pill-pair-x: 23px;
  --kkd-profile-card-pill-pair-y: 24px;
  --kkd-profile-card-pill-add-x: 212px;
  --kkd-profile-card-pill-add-y: 104px;
  --kkd-profile-card-pill-pair-padding-left: 14.03px;
  --kkd-profile-card-pill-pair-padding-right: 11.29px;
  --kkd-profile-card-pill-chevron-width: 10.67px;
  --kkd-profile-card-pill-chevron-height: 5.35px;
  --kkd-profile-card-pill-chevron-gap: 10px;

  --kkd-profile-card-text-x: 24px;
  --kkd-profile-card-text-y: 73px;
  --kkd-profile-card-text-width: 144px;
  --kkd-profile-card-text-height: 60px;
  --kkd-profile-card-price-font-size: 30px;
  --kkd-profile-card-price-line-height: 1.171875em;
  --kkd-profile-card-change-y: 46px;

  --kkd-profile-filter-y: 320px;
  --kkd-profile-filter-width: 153px;
  --kkd-profile-filter-height: 36px;
  --kkd-profile-filter-radius: 18px;
  --kkd-profile-filter-highest-x: 20px;
  --kkd-profile-filter-hours-x: 202px;
  --kkd-profile-filter-font-size: 15px;
  --kkd-profile-filter-line-height: 1.171875em;

  --kkd-profile-item-x: 20px;
  --kkd-profile-item-width: 335px;
  --kkd-profile-item-height: 69px;
  --kkd-profile-item-radius: var(--radius-card);
  --kkd-profile-item-right-padding: 20px;
  --kkd-profile-item-icon-x: 18px;
  --kkd-profile-item-icon-y: 10px;
  --kkd-profile-item-icon-width: 48.21px;
  --kkd-profile-item-icon-height: 50px;
  --kkd-profile-item-name-x: 78px;
  --kkd-profile-item-name-y: 16px;
  --kkd-profile-item-subtitle-x: 77.5px;
  --kkd-profile-item-subtitle-y-default: 42px;
  --kkd-profile-item-subtitle-y-ripple: 41px;
  --kkd-profile-item-subtitle-y-low: 44px;
  --kkd-profile-item-subtitle-y-tight: 39px;
  --kkd-profile-item-value-y-default: 16px;
  --kkd-profile-item-value-y-ripple: 15px;
  --kkd-profile-item-value-y-etherium: 17px;
  --kkd-profile-item-change-y-default: 41px;
  --kkd-profile-item-change-y-ripple: 40px;
  --kkd-profile-item-change-y-etherium: 42px;

  --kkd-profile-item-ripple-y: 376px;
  --kkd-profile-item-etherium-y: 460px;
  --kkd-profile-item-binance-y: 544px;
  --kkd-profile-item-pound-y: 628px;
  --kkd-profile-item-tether-y: 712px;
  --kkd-profile-item-bitcoin-cash-y: 796px;

  --kkd-profile-home-y: 923px;
  --kkd-profile-home-height: 34px;
  --kkd-profile-home-indicator-y: 15px;
  --kkd-profile-home-indicator-width: 134px;
  --kkd-profile-home-indicator-height: 5px;
  
  --pc-width-container: 1400px;
}
