@charset "UTF-8";

:root {
	/* dashboard base */
	--color-bg-app:#0f1724;
	--color-bg-stage:#101828;
	--color-bg-panel:#1e2939;
	--color-bg-panel-hover:#223146;
	--color-bg-surface:#f5f5f5;
	--color-bg-card:#ffffff;

	/* brand / primary */
	--color-primary:#296bff;
	--color-primary-soft:#8db4ff;
	--color-primary-deep:#1b3566;
	--color-primary-active:#0b3a82;

	/* text */
	--color-text-primary:#ffffff;
	--color-text-secondary:#d1d5dc;
	--color-text-muted:#99a1af;
	--color-text-body:#333333;
	--color-text-strong:#111827;
	--color-text-soft:#666666;

	/* border / line */
	--color-border-dark:#364153;
	--color-border-mid:#4a5565;
	--color-border-light:#d9d9e0;
	--color-border-soft:#acacac;

	/* status */
	--color-success:#00a63e;
	--color-warning:#d08700;
	--color-danger:#d4183d;
	--color-info:#22c55e;

	--grey-5:#f4f5f6;
	--grey-10:#e6e8ea;
	--grey-20:#cdd1d5;
	--grey-30:#b1b8be;
	--grey-40:#8a949e;
	--grey-50:#6d7882;
	--grey-60:#58616a;
	--grey-70:#464c53;
	--grey-80:#33363d;
	--grey-90:#1e2124; /* base */
	--grey-95:#131416;

	--greyOpacity50: rgba(0,23,51,0.02);
    --greyOpacity100: rgba(2,32,71,0.05);
    --greyOpacity200: rgba(0,27,55,0.1);
    --greyOpacity300: rgba(0,29,58,0.18);
    --greyOpacity400: rgba(0,25,54,0.31);
    --greyOpacity500: rgba(3,24,50,0.46);
    --greyOpacity600: rgba(0,19,43,0.58);
    --greyOpacity700: rgba(3,18,40,0.7);
    --greyOpacity800: rgba(0,12,30,0.8);
    --greyOpacity900: rgba(2,9,19,0.91);

	--point:#d63d4a;
	--point-5:#fbeff0;
	--point-10:#f5d6d9;
	--point-20:#ebadb2;
	--point-30:#e0858c;
	--point-40:#d65c66;
	--point-50:#d63d4a; /* base */
	--point-60:#ab2b36;
	--point-70:#7a1f26;
	--point-80:#521419;
	--point-90:#310c0f;
	--point-95:#21080a;
	
	--danger:#de3412;
	--danger-5:#fdefec;
	--danger-10:#fcdfd9;
	--danger-20:#f7afa1;
	--danger-30:#f48771;
	--danger-40:#f05f42;
	--danger-50:#de3412; /* base */
	--danger-60:#bd2c0f;
	--danger-70:#8a240f;
	--danger-80:#5c180a;
	--danger-90:#390d05;
	--danger-95:#260903;
	
	--iw-warning:#ffb114;
	--iw-warning-5:#fff3db;
	--iw-warning-10:#ffe0a3;
	--iw-warning-20:#ffc95c;
	--iw-warning-30:#ffb114; /* base */
	--iw-warning-40:#c78500;
	--iw-warning-50:#9e6a00;
	--iw-warning-60:#8a5c00;
	--iw-warning-70:#614100;
	--iw-warning-80:#422c00;
	--iw-warning-90:#2e1f00;
	--iw-warning-95:#241800;
	
	--success:#228738;
	--success-5:#eaf6ec;
	--success-10:#d8eedd;
	--success-20:#a9dab4;
	--success-30:#7ec88e;
	--success-40:#3fa654;
	--success-50:#228738; /* base */
	--success-60:#267337;
	--success-70:#285d33;
	--success-80:#1f4727;
	--success-90:#122b18;
	--success-95:#0e2012;
	
	--info:#096ab3;
	--info-5:#e7f4fe;
	--info-10:#d3ebfd;
	--info-20:#9ed2fa;
	--info-30:#5fb5f7;
	--info-40:#2098f3;
	--info-50:#0b78cb;
	--info-60:#096ab3; /* base */
	--info-70:#085691;
	--info-80:#053961;
	--info-90:#03253f;
	--info-95:#021a2c;

	--heigh-contrast-wh:#ffffff;
	--heigh-contrast-bk:#000000;
}

:root {
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 16px;
    --radius-xl: 20px;
    --radius-xxl: 24px
}

.radius--s {
    border-radius: 4px;
    border-radius: var(--radius-s)
}

.radius--m {
    border-radius: 8px;
    border-radius: var(--radius-m)
}

.radius--l {
    border-radius: 16px;
    border-radius: var(--radius-l)
}

.radius--xl {
    border-radius: 20px;
    border-radius: var(--radius-xl)
}

.radius--xxl {
    border-radius: 24px;
    border-radius: var(--radius-xxl)
}

:root {
    --shadow-s: 0 0 4px 0 var(--greyOpacity100),0 4px 16px 0 var(--greyOpacity100);
    --shadow-m: 0 8px 16px 0 var(--greyOpacity200),0 4px 8px 0 var(--greyOpacity100);
    --shadow-l: 0 24px 40px 0 var(--greyOpacity50),0 16px 24px 0 var(--greyOpacity200),0 0 8px 0 var(--greyOpacity100)
}

.shadow--s {
    box-shadow: 0 0 4px 0 rgba(2,32,71,.05),0 4px 16px 0 rgba(2,32,71,.05);
    box-shadow: var(--shadow-s)
}

.shadow--m {
    box-shadow: 0 8px 16px 0 rgba(0,27,55,.1),0 4px 8px 0 rgba(2,32,71,.05);
    box-shadow: var(--shadow-m)
}

.shadow--l {
    box-shadow: 0 24px 40px 0 rgba(0,23,51,.02),0 16px 24px 0 rgba(0,27,55,.1),0 0 8px 0 rgba(2,32,71,.05);
    box-shadow: var(--shadow-l)
}