/* CECloud Web Design System — semantic color tokens
 * Aliases consumed by all components. Values from arco-theme-8274 savedTokens. */

:root {
  /* text */
  --color-text-1: var(--gray-10);
  --color-text-2: var(--gray-8);
  --color-text-3: var(--gray-7);
  --color-text-4: var(--gray-5);

  /* backgrounds — --color-bg-0 is the light primary tint (#f0f5fe) used by
     login/blank canvases; the CONSOLE content canvas is --color-bg-page (fill-2). */
  --color-bg-1: #fff;
  --color-bg-2: #fff;
  --color-bg-3: #fff;
  --color-bg-4: #fff;
  --color-bg-5: #fff;
  --color-bg-white: #fff;
  --color-bg-0: #f0f5fe; /* source @color-bg-0 (login / blank canvases) */
  /* console canvas — the preview shell paints .layout-content with fill-2 */
  --color-bg-page: var(--color-fill-2);

  /* fills (hover surfaces, disabled backgrounds) */
  --color-fill-1: var(--gray-1);
  --color-fill-2: var(--gray-2);
  --color-fill-3: var(--gray-1);
  --color-fill-4: var(--gray-3);

  /* borders */
  --color-border-1: rgb(241, 242, 243);
  --color-border-2: rgb(239, 241, 244);
  --color-border-3: rgb(211, 217, 226);
  --color-border-4: rgb(219, 221, 224);

  /* semantic shortcuts */
  --color-primary: var(--primary-6);
  --color-primary-hover: var(--primary-5);
  --color-primary-active: var(--primary-7);
  --color-primary-light-1: var(--primary-1);
  --color-primary-light-3: var(--primary-3);
  --color-link: var(--primary-6);
  --color-link-hover: var(--primary-5);
  --color-link-active: var(--primary-7);
  --color-success: var(--success-6);
  --color-warning: var(--warning-6);
  --color-danger: var(--danger-6);
  --color-white: #fff;
  --color-transparent: transparent;

  /* data-viz series (from @color-chart-*) */
  --color-chart-1: #4c7ffe;
  --color-chart-2: #4cd4f0;
  --color-chart-3: #53db97;
  --color-chart-4: #ffc04d;
  --color-chart-5: #fdaa65;
  --color-chart-6: #fe7f80;
  --color-chart-7: #d481fd;
  --color-chart-8: #807fff;
  --color-chart-9: #a6b7d0;
  --color-chart-10: #ffe45c;
  --color-chart-11: #1fb1fe;
  --color-chart-12: #f06078;

  /* Compat aliases (Arco naming). --gray-N is the single source of truth:
     use --gray-N (or a --color-* semantic token) in new code, never --color-neutral-N. */
  --color-neutral-1: var(--gray-1);
  --color-neutral-2: var(--gray-2);
  --color-neutral-3: var(--gray-3);
  --color-neutral-4: var(--gray-4);
  --color-neutral-5: var(--gray-5);
  --color-neutral-6: var(--gray-6);
  --color-neutral-7: var(--gray-7);
  --color-neutral-8: var(--gray-8);
  --color-neutral-9: var(--gray-9);
  --color-neutral-10: var(--gray-10);
  --color-border: var(--gray-3);

  /* tooltip */
  --color-tooltip-bg: rgb(29, 33, 41);

  /* overlay mask (modals, drawers) */
  --color-mask-bg: rgba(29, 33, 41, 0.6);
  /* loading layer over content (Spin wrapper) */
  --color-spin-layer-bg: rgba(255, 255, 255, 0.6);
  /* component-level paint hooks — kept as tokens so a dark/brand theme can
     override them without touching components.css */
  /* secondary button bottom shade (was a literal rgba(169,174,184,.08) = text-4 @ 8%) */
  --shade-control-secondary: color-mix(in srgb, var(--color-text-4) 8%, transparent); /* @kind color */
  /* ambient shadow under popups (was a literal rgba(0,0,0,.2)) */
  --color-shadow-ambient: rgba(0, 0, 0, 0.2);
  /* skeleton shimmer highlight (was a literal rgba(255,255,255,.6)) */
  --color-shimmer: rgba(255, 255, 255, 0.6);
}