/* ============================================================
   CloudEASE Design Tokens — subset for the Auth sign-in page
   ============================================================
   SOURCE OF TRUTH: cloudease repo,
   src/webconsole/css/frontend/tokens.css
   Names and values MUST stay identical to CE. When CE tokens
   change, re-sync this file manually (no shared pipeline between
   the repos — this page is a standalone S3 static site) and
   update the "Last synced" line below.
   Deliberate subset — tokens/groups absent here are intentionally
   omitted; add a token only when the page starts consuming it.
   Page rules should never reference raw values — only these
   tokens (directly or via the --pb-* aliases in main.css).
   Last synced: 2026-08-12 (cloudease commit 8ac70c78).
   ============================================================ */

:root {

	/* --------- COLORS — Brand --------- */
	--ce-color-primary:          #005EB8;
	--ce-color-primary-hover:    #004A91;
	--ce-color-primary-active:   #003B74;
	--ce-color-primary-light:    #E8F1FA;

	/* --------- COLORS — Semantic --------- */
	--ce-color-success:          #15692C;
	--ce-color-success-light:    #E9F5EC;
	--ce-color-warning:          #8A6900;
	--ce-color-warning-light:    #FFF8E1;
	--ce-color-error:            #B7201D;
	--ce-color-error-hover:      #A71D1A;
	--ce-color-error-light:      #FDECEA;
	--ce-color-info:             #005EB8;
	--ce-color-info-light:       #E8F1FA;

	/* --------- COLORS — Text --------- */
	--ce-color-text:             #1A1A1A;
	--ce-color-text-secondary:   #4A4A4A;
	--ce-color-text-muted:       #6B6B6B;
	--ce-color-text-on-primary:  #FFFFFF;
	--ce-color-text-link:        #005EB8;
	--ce-color-text-link-hover:  #004A91;

	/* --------- COLORS — Surfaces & Borders --------- */
	--ce-color-bg:               #F2F4F7;
	--ce-color-bg-white:         #FFFFFF;
	--ce-color-bg-hover:         #E8EAED;
	--ce-color-bg-active:        #DCE0E5;

	--ce-color-border:           #D1D5DB;
	--ce-color-border-light:     #E5E7EB;
	--ce-color-border-focus:     #005EB8;
	--ce-color-border-error:     #C5221F;

	/* --------- TYPOGRAPHY --------- */
	--ce-font-family:            Tahoma, Geneva, sans-serif;

	--ce-font-size-xs:           0.75rem;
	--ce-font-size-sm:           0.875rem;
	--ce-font-size-base:         1rem;
	--ce-font-size-md:           1.125rem;
	--ce-font-size-lg:           1.1875rem;
	--ce-font-size-xl:           1.25rem;
	--ce-font-size-2xl:          1.375rem;

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

	--ce-line-height-tight:      1.25;
	--ce-line-height-normal:     1.5;

	/* --------- SPACING --------- */
	--ce-space-2xs:              0.125rem;
	--ce-space-xs:               0.25rem;
	--ce-space-sm:               0.5rem;
	--ce-space-md:               0.75rem;
	--ce-space-base:             1rem;
	--ce-space-lg:               1.5rem;
	--ce-space-xl:               2rem;
	--ce-space-2xl:              3rem;

	/* --------- BORDERS & RADIUS --------- */
	--ce-radius-sm:              0.1875rem;
	--ce-radius-base:            0.375rem;
	--ce-radius-lg:              0.5rem;

	--ce-border-width:           1px;
	--ce-border:                 var(--ce-border-width) solid var(--ce-color-border);
	--ce-border-light:           var(--ce-border-width) solid var(--ce-color-border-light);

	/* --------- SHADOWS --------- */
	--ce-shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.06);
	--ce-shadow-base:            0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--ce-shadow-lg:              0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);

	/* --------- FOCUS --------- */
	--ce-focus-ring-width:       3px;
	--ce-focus-ring-color:       var(--ce-color-primary);
	--ce-focus-ring-offset:      2px;
	--ce-focus-ring:             var(--ce-focus-ring-width) solid var(--ce-focus-ring-color);

	/* --------- TRANSITIONS --------- */
	--ce-transition-fast:        120ms ease-in-out;
	--ce-transition-base:        200ms ease-in-out;
}

/* =============================================================
   REDUCED MOTION — mirrors CE's block for the tokens in this subset
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ce-transition-fast:    0ms;
		--ce-transition-base:    0ms;
	}
}