/**
 * @file
 * CheersYou Ask Design Tokens & Global CSS Variables.
 * Pure Native CSS (No framework dependencies).
 */

:root {
  /* ==========================================================================
     1. 品牌与色彩系统 (Color System)
     ========================================================================== */
  --cy-color-primary: #003CC5;
  --cy-color-primary-hover: #002da0;
  --cy-color-primary-light: #e6edff;
  
  --cy-color-highlight: #F3960A;
  --cy-color-highlight-hover: #dc8400;
  --cy-color-highlight-light: #fff8ec;

  --cy-color-green: #6C9364;
  --cy-color-green-hover: #587951;
  --cy-color-green-light: #edf5eb;

  --cy-color-red: #BF260E;
  --cy-color-red-hover: #a31e08;
  --cy-color-red-light: #fdedeb;

  --cy-color-cyan: #20CFCB;
  --cy-color-cyan-hover: #17b3af;
  --cy-color-cyan-light: #e8faf9;

  --cy-color-bg: #F3F4F4;
  --cy-color-light-blue: #EEF3F4;
  --cy-color-white: #FFFFFF;
  --cy-color-black: #000000;

  /* 中性灰阶 */
  --cy-color-text-main: #212529;
  --cy-color-text-secondary: #555555;
  --cy-color-text-muted: #A8A8A8;
  --cy-color-text-light: #FFFFFF;

  --cy-color-border-light: #EFEFEF;
  --cy-color-border: #E2E8F0;
  --cy-color-border-dark: #CBD5E1;

  /* ==========================================================================
     2. 布局与间距尺寸 (Layout & Spacing)
     ========================================================================== */
  --cy-container-max: 1200px;
  --cy-container-gutter: clamp(1rem, 3vw, 1.5rem);

  --cy-gap-xxs: 0.125rem; /* 2px */
  --cy-gap-xs:  0.25rem;  /* 4px */
  --cy-gap-sm:  0.5rem;   /* 8px */
  --cy-gap-md:  1rem;     /* 16px */
  --cy-gap-lg:  1.5rem;   /* 24px */
  --cy-gap-xl:  2rem;     /* 32px */
  --cy-gap-xxl: 3rem;     /* 48px */

  /* ==========================================================================
     3. 字体与排版 (Typography)
     ========================================================================== */
  --cy-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --cy-font-size-xs: 0.75rem;   /* 12px */
  --cy-font-size-sm: 0.875rem;  /* 14px */
  --cy-font-size-md: 1rem;      /* 16px */
  --cy-font-size-lg: 1.125rem;  /* 18px */
  --cy-font-size-xl: 1.25rem;   /* 20px */
  --cy-font-size-2xl: 1.5rem;   /* 24px */
  --cy-font-size-3xl: 1.875rem; /* 30px */

  --cy-font-weight-normal: 400;
  --cy-font-weight-medium: 500;
  --cy-font-weight-semibold: 600;
  --cy-font-weight-bold: 700;

  --cy-line-height-tight: 1.25;
  --cy-line-height-normal: 1.5;
  --cy-line-height-relaxed: 1.75;

  /* ==========================================================================
     4. 边框圆角与阴影 (Radius & Shadows)
     ========================================================================== */
  --cy-radius-xs: 2px;
  --cy-radius-sm: 4px;
  --cy-radius-md: 8px;
  --cy-radius-lg: 12px;
  --cy-radius-xl: 16px;
  --cy-radius-pill: 50px;
  --cy-radius-circle: 50%;

  --cy-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --cy-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --cy-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cy-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ==========================================================================
     5. 动画与转场 (Transitions & Z-Index)
     ========================================================================== */
  --cy-transition-fast: 0.15s ease-in-out;
  --cy-transition-normal: 0.25s ease-in-out;
  --cy-transition-slow: 0.4s ease-in-out;

  --cy-z-dropdown: 1000;
  --cy-z-sticky: 1020;
  --cy-z-fixed: 1030;
  --cy-z-modal-backdrop: 1040;
  --cy-z-modal: 1050;
  --cy-z-popover: 1060;
  --cy-z-tooltip: 1070;
}