/* CECloud Web Design System — spacing, sizing, radii, borders
 * Radii are the theme's signature: 6 / 8 / 12px (vs Arco defaults 2/4/8).
 *
 * NAMING RULES (read before adding a token — collisions here fail silently):
 *   --spacing-N        2px-step spacing scale
 *   --size-N           4px-step DIMENSION scale (icons, gaps, boxes) — NOT control heights
 *   --control-height-* control heights; the ONLY size a Button/Input/Select takes
 *   --border-width-*   border widths
 *   --color-border-*   border COLORS  ← never mix the two families
 *   --gray-N           base greys; --color-neutral-N are compat aliases, do not use in new code
 */

:root {
  /* spacing scale (2px steps) */
  --spacing-none: 0; /* @kind spacing */
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 10px;
  --spacing-6: 12px;
  --spacing-7: 16px;
  --spacing-8: 20px;
  --spacing-9: 24px;
  --spacing-10: 32px;

  /* dimension scale (4px steps) — icon boxes, chips, avatar discs */
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-8: 32px;
  --size-9: 36px;
  --size-10: 40px;
  --size-13: 48px;
  --size-14: 56px;

  /* control heights (medium is the default) */
  --control-height-mini: 24px;
  --control-height-small: 28px;
  --control-height-medium: 32px;
  --control-height-large: 36px;

  /* @deprecated compat aliases for control heights — prefer --control-height-* */
  --size-mini: var(--control-height-mini);
  --size-small: var(--control-height-small);
  --size-default: var(--control-height-medium);
  --size-large: var(--control-height-large);

  /* border radius — theme signature, rounder than Arco default */
  --border-radius-none: 0; /* @kind radius */
  --border-radius-small: 6px; /* @kind radius */
  --border-radius-medium: 8px; /* @kind radius */
  --border-radius-large: 12px; /* @kind radius */
  --border-radius-circle: 50%; /* @kind radius */

  /* border widths */
  --border-width-none: 0; /* @kind spacing */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;

  /* @deprecated — these collide by name with the --color-border-N COLORS.
     Kept as aliases so older cards keep working; new code uses --border-width-*. */
  --border-none: var(--border-width-none); /* @kind spacing */
  --border-1: var(--border-width-1);
  --border-2: var(--border-width-2);
  --border-3: var(--border-width-3);

  /* box shadows (from savedTokens @shadow1/2/3-center) */
  --shadow-1: 0 0 4px 0 rgba(29, 33, 41, 0.1);
  --shadow-2: 0 4px 12px 0 rgba(29, 33, 41, 0.1);
  --shadow-3: 0 4px 24px 0 rgba(29, 33, 41, 0.1);
  --shadow-special: 0 0 1px rgba(0, 0, 0, 0.3);

  /* focus ring */
  --focus-ring: 0 0 0 2px var(--primary-1);

  /* 层叠刻度（2026-09-20 补）—— 组件层不再各写各的 z-index 字面值；
     最后两档是**留给消费方的浮层带**：常驻助手/通知中心用 float，
     分幕引导遮罩/spotlight 用 guide。消费方若自取 60/90 会被 Drawer/Modal（panel=1001）
     压住且**不报错**，这正是新增本刻度的原因。 */
  --z-index-spin: 11; /* @kind other */ /* @kind other */
  --z-index-sider: 99; /* @kind other */
  --z-index-header: 100; /* @kind other */
  --z-index-popup: 100; /* @kind other */
  --z-index-mask: 1000; /* @kind other */
  --z-index-panel: 1001; /* @kind other */
  --z-index-float: 1100; /* @kind other */
  --z-index-guide: 1200; /* @kind other */

  /* motion */
  --transition-fast: 0.1s linear; /* @kind other */
  --transition-normal: 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); /* @kind other */
}